d3 js可以达到多少

Question

我正在尝试构建一个网络图（如大脑网络）来显示数百万个节点。 我想知道在一个图表上添加更多网络节点方面我可以在多大程度上推动d3 js？

例如， http：//linkedjazz.org/network/和http://fatiherikli.github.io/programming-language-network/#foundation:Cappuccino

我不熟悉d3.js（虽然我是一个JS开发人员），我只是想知道d3.js是否是构建大规模网络可视化（一百万个节点+）的正确工具，然后我开始查看其他一些工具。

我的要求很简单：构建一个可扩展的基于互动网络的网络可视化

Answer 1

我自己做了一点搜索，发现了以下D3性能测试。

小心点，我锁定了一些我的浏览器选项卡试图将其推到极限。

一些进一步的搜索引导我找到一个可能的解决方案，你可以预先渲染d3.js图表​​服务器端，但我不确定这将有所帮助，具体取决于你所需的交互级别。

这可以在这里找到。

Answer 2

“缩放”并不是一个抽象的问题，而是关于你想做多少以及你有哪些硬件。 您已经定义了一个变量：“数百万个节点”。 那么，下一个问题是这将运行什么样的硬件？ 如果答案是“任何可以访问我网站的内容”，答案是“不，它不会扩展”。 不是与d3，可能没有任何东西。 低成本智能手机无法处理数百万个节点。 如果答案是“高端工作站”，那么答案就是“可能”。

确切知道的唯一方法是采用您计划支持的最低端硬件配置文件并对其进行测试。 您能保证用户可以访问64GB 16核工作站吗？ 8GB 2核笔记本电脑？ 无论是什么，都要加载一个页面，其中包含最大数量的节点，并在某些内容中绘制草图以模拟您想要的交互类型的需求并查看它是否有效。

Answer 3

d3刻度多少取决于你如何使用它。

如果你使用d3来渲染大量的svg元素，浏览器将开始在数千个元素中出现性能问题。 在浏览器崩溃之前，您最多可以渲染大约100k个元素，但此时用户交互基本上没用。

但是，可以使用画布渲染大量的线条或圆圈。 在画布中，所有内容都在单个图像文件中呈现。 您不是为每个节点或线创建新元素，而是在图像文件中为其绘制一条线。 这样做的缺点是动画有点困难，因为你无法在画布中移动元素，只能在画布上绘制或重绘整个画面。 这不是不可能的，但是在百万个节点上计算成本很高。

由于canvas没有节点，如果你想使用enter / exit / update范例，你必须在DOM中放置占位符元素。 以下是如何做到这一点的一个很好的例子： 带有D3的DOM到画布。

由于canvas的内存成本不随节点数量而扩展，因此它为大型可视化提供了一个非常可扩展的解决方案，但需要通过变通方法使其具有交互性。