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

【问题标题】：Crossfilter scatterplot with 2-d brushing使用 2-d 刷亮的交叉滤波器散点图
【发布时间】：2013-06-01 20:45:11
【问题描述】：

我正在考虑用crossfilter 刷散点图，但不清楚如何去做；我已经非常仔细地查看了 canonical example 以及 Mike 的 scatterplot matrix brushing d3 代码。

特别是我的问题是：

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

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

b.制作单个二维维度（即data.dimension(function(d){ return [d.x, d.y];}) 之类的东西），并在其上使用自定义过滤器功能？
性能：绘制散点图大约需要 150 毫秒（而直方图大约需要 10 毫秒）。这使得实时更新（即使查询很快）也不是很好。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

返回 e[0][0] > d[p.x] || d[p.x] > e1[0] || e0 > d[p.y] || d[p.y] > e1;
不要重绘整个散点图！看看花的例子，唯一改变的是“隐藏”类的应用。如果您只是更新点的颜色，则更新不会花费 150 毫秒。此外，如果您将绘制的点留在原处，您可以添加很酷的transition effects

【讨论】：

谢谢。我仍然有点不清楚如何让交叉过滤器与结果相交。你能提供一个代码 sn-p 来勾勒出你的想法吗？另外，关于重绘的要点；只需更新类，绘图速度就会快很多。但是，无论出于何种原因，这不是 crossfilter 示例所做的。
我丢失了试图将其作为评论发布的代码片段，基本上是 ctrl-f 用于此文件 roadtolarissa.com/meteors/drawMap.js 中的 'cartoDbIds' 并查看它在我的解决方案中的两个代码块查看交叉过滤器 api。交叉过滤器示例从不重绘个人点，只是直方图条。

【解决方案3】：

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

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

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

【讨论】：