具有大(> 500,000)点的D3.js散点图?聚类?

vic*_*ooi 6 javascript visualization scatter-plot d3.js

我正在查看绘制具有大量点(500,000点及以上)的散点图。

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

我一直在用JavaScript制作图表,以使其更易于分发。我正在看D3.js,看那里是否有类似的可行方法。我确实找到了一个基本散点图的示例:

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

首先,您能否绘制出该点数?(500,000及以上)给我的印象是,由于所有DOM对象的开销,您无法做到吗?有办法解决吗?

其次,是否有任何可用的集群,无论是库还是D3.js中完成的示例?

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

第四,在每个点上都具有单击处理程序,并且可以在覆盖图中甚至在单独的窗口中显示一些文本,这也很好。有什么想法吗?

Eli*_*jah 6

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

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

最终,您的选择是:

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

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

  • 该示例演示了四叉树而不是画布。 (4认同)