使用2-d刷涂的Crossfilter散点图

Question

我正在考虑使用crossfilter在散点图上刷牙，而且目前还不清楚如何去做;我仔细查看了canonical example以及迈克的scatterplot matrix brushing d3代码。

特别是，我的问题是：

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

   一个。做2个1-d查询并自己交叉结果？

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

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

Answer 1

您是否考虑过使用DC.js？

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

Answer 2

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

   返回e [0] [0]＆gt; d [p.x] || d [p.x]＆gt; E 1 [0]       || e 0＆gt; d [p.y] || d [p.y]＆gt; E 1;

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

Answer 3

1. <强>查询

   一个。 2个1-d查询。与亚当斯评论相同。使用一维数据，Crossfilter会更快。

2. <强>渲染

我认为大部分内容与渲染本身有关。亚当给出了一些很好的观点，但我想提供一些替代资料：

考虑利用d3.geom.quadtree（http://bl.ocks.org/mbostock/4343214）。这将允许您仅重新显示受影响的点。但是，这意味着对其他数据集的查询不能更改散点图中单个点的（x，y）位置;因为你必须重新索引四叉树。

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