D3.js散点图有大(> 500,000)点吗?集群?

时间:2014-12-19 20:26:41

标签: javascript d3.js visualization scatter-plot

我正在考虑绘制一个有大量点(500,000及以上)的散点图。

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

我正在考虑用JavaScript做图表,以便更容易分发。我在看D3.js,看看那里有类似的东西是否可行。我确实找到了这个基本散点图的例子:

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

首先,你能够绘制这个点数吗? (500,000及以上)由于所有DOM对象的开销,我不能给你的印象?有办法解决这个问题吗?

其次,是否有任何类型的聚类可用,或者只是一个库,甚至只是D3.js中的一个例子?

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

第四,为每个点设置点击处理程序也很好 - 并且可以在叠加层中显示某些文本,甚至只在单独的窗口中显示。有什么想法吗?

2 个答案:

答案 0 :(得分:3)

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

D3确实包含可用于群集的四叉树支持。在上面的示例中使用它来加速搜索,但您可以使用它在某些比例范围内嵌套元素。

最终,您的选择是:

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

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

答案 1 :(得分:1)

是的,D3.js可以通过两件事来处理百万级别的数据:

  1. 在服务器端预渲染。有关详情,请参阅此处:https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/

    • 通过聚合(或聚类)部分数据,以便用户可以根据需要进行交互和扩展图表。如果可以,可以使用可折叠节点(http://bl.ocks.org/mbostock/1062288)。

    • 还要避免使用强制布局。需要时间来解决并融合到稳定的位置。

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

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