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

标签 javascript d3.js visualization scatter-plot

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

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

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

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

首先,你能绘制出那么多的点吗? (500,000 及以上)由于所有 DOM 对象的开销,我的印象是你不能这样做?有解决办法吗?

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

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

第四,如果每个点都有点击处理程序也不错 - 并在叠加层中显示一些文本,甚至只是在单独的窗口中显示。对此有什么想法吗?

最佳答案

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

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

最终,您的选择是:

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

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

关于javascript - 具有大(> 500,000)点的 D3.js 散点图?聚类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27573398/

相关文章:

javascript - 外部JS文件按钮调用

javascript - 如何在表格中显示c3.js数据

javascript - 如何翻译 svg 元素本身?

javascript - 如何在堆积条形图中显示值的总和

javascript - D3.js Force Layout - 只显示图表的一部分

python - 情节 AttributeError : 'Figure' object has no attribute 'update_layout'

javascript - 如何将具有相同属性的对象合并到一个数组中?

javascript - 将 JSON HTML 字符串转换为 HTML

javascript - 如何避免 React Component 不必要的重新渲染

visualization - 如何为这个 Vega 可视化添加图例