javascript - 使用 2-d 刷亮的交叉滤波器散点图

Question

我正在考虑用crossfilter在散点图上刷，目前还不清楚如何去做；我已经非常仔细地查看了规范示例以及 Mike 的散点图矩阵刷d3 代码。

特别是，我的问题是：

1. 查询：我不确定如何进行二维查询来进行交叉过滤。我应该：

   一个。自己做 2 个一维查询并与结果相交吗？

   湾。制作单个二维维度（即类似的东西data.dimension(function(d){ return [d.x, d.y];})），并在其上使用自定义过滤器功能？

2. 性能：绘制散点图大约需要 150 毫秒（直方图大约需要 10 毫秒）。这使得实时更新（即使查询很快）不是很好。

Answer 1

你考虑过使用DC.js吗？

DC.js是一个扩展 D3.js 并具有交叉过滤器支持的 Javascript 图表库。我刚开始将它用于条形图，尽管我还没有尝试将它用于散点图。它允许您以交互方式过滤和放大子集，并且使用交叉过滤器速度很快。

Answer 2

1. 查询

   一个。2 一维查询。与亚当斯的评论相同。使用一维数据进行交叉过滤会更快。

2. 渲染

我认为其中大部分与渲染有关，而不是与查询本身有关。亚当给出了一些很好的观点，但我想提供一些替代来源：

研究杠杆作用d3.geom.quadtree( http://bl.ocks.org/mbostock/4343214 )。这将允许您仅重新可视化受到影响的点。然而，这意味着对其他数据集的查询不能更改散点图中单个点的 (x, y) 位置；因为您必须重新索引四叉树。

另外，您是否考虑过另一种可视化技术？2d binning 是一种有助于避免性能问题的好技术：http: //vis.stanford.edu/projects/datavore/splom/

Answer 3

1. 我会在 crossfilter 中设置两个维度——一个用于 x，一个用于 y——并让 crossfilter 库为您与结果相交。Crossfilter 在幕后做了一些花哨的东西，可以更好地处理一维数据。如果您没有太多数据并且只需要散点图过滤器，则复制花卉示例可能更容易：

   返回 e[0][0] > d[px] || d[px] > e 1 [0] || e 0 > d[py] || d[py] > e 1 ;

2. 不要重绘整个散点图！看看花的例子，唯一改变的是“隐藏”类的应用。如果您只是更新点的颜色，则更新不会花费 150 毫秒。此外，如果您将绘制的点留在原处，您可以添加很酷的过渡效果