具有大（> 500,000）点的D3.js散点图？聚类？

Question

我正在研究绘制一个包含大量点（500,000 及以上）的散点图。

目前，我们正在 Python 中使用 Matplotlib 进行此操作。它绘制点，并提供平移和缩放控件。我不相信它提供任何聚类或点，它只是将它们全部绘制出来——我想在缩小的视图中没有多大意义，但你可以放大它们，它们都在那里。

我正在考虑用 JavaScript 制作图表，以使其更易于分发。我在看 D3.js，看看那里是否有类似的东西。我确实找到了这个基本散点图的例子：

http://bl.ocks.org/mbostock/3887118

首先，你能画出这么多点吗？ （500,000 及以上）我的印象是你不能因为所有 DOM 对象的开销？有没有办法解决这个问题？

其次，是否有任何类型的集群可用，无论是库还是只是在 D3.js 中完成的示例？

第三，如果有人知道任何关于平移/缩放功能和集群的好例子，或者甚至只是一个处理它的打包 JS 库，那就太棒了。

第四，为每个点设置点击处理程序也很不错 - 并在叠加层或什至在单独的窗口中显示一些文本。对此有什么想法吗？

Answer 1

你能用 D3 画出 50 万分吗？当然，但不是 SVG。您将不得不使用画布（这里有一个简单的示例，包含 10,000 个点，包括基于画笔的选择：http://bl.ocks.org/emeeks/306e64e0d687a4374bcd），这意味着您不再需要为单个元素分配点击处理程序。您将无法使用 SVG 渲染 50 万个点，因为正如您所提到的，所有这些 DOM 元素都会阻塞您的界面。

D3 确实包含可用于集群的四叉树支持。在上面的示例中使用它来加快搜索速度，但您可以使用它来以特定比例将元素嵌套在附近。

最终，您的选择是：

1) 在画布中呈现并轮询鼠标位置以提供在该点呈现的数据元素的其他一些库/自定义实现。

2) 一种复杂的自定义 D3 方法，将元素嵌套在附近，并且仅呈现适合您所在的缩放级别和画布位置（平移）的 SVG 元素。

Answer 2

是的，D3.js 可以通过两件事处理百万级数据：

1. 在服务器端预渲染。更多信息请看这里：https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/

2. • 通过聚合（或聚类）部分数据，以便用户可以根据需要进行交互和扩展图形。为此，请尽可能使用可折叠节点 (http://bl.ocks.org/mbostock/1062288)。

   • 同时避免使用强制布局。稳定并收敛到稳定的定位需要时间。

对于集群库，我会从现成的库中挑选一个。我会从 python 中选择 scikits 库，在 JavaScript 中有很多，但它们不是很健壮，因为它们主要涵盖 k-means 或层次聚类。我会通过聚类使用 scikits 预先计算坐标，然后使用 D3 渲染它。

D3 处理平移和缩放。再次单击处理程序和文本显示在 D3 中可用。 (http://bl.ocks.org/robschmuecker/7880033)