d3 js可以达到多少

时间:2014-10-14 13:59:48

标签: javascript d3.js neural-network scalability

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

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

我对d3.js并不熟悉(虽然我是JS开发人员),我只想知道d3.js是否是构建大规模网络可视化(一百万个节点+)的正确工具,然后才开始寻找在其他一些工具上。

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

3 个答案:

答案 0 :(得分:5)

我自己做了一些搜索,发现了以下D3 Performance Test.

小心点,我锁定了一些浏览器标签,试图将其推到极限。

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

可以找到here.

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

多少d3音阶非常依赖于你如何使用它。

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

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

由于canvas没有节点,如果你想使用enter / exit / update范例,你必须在DOM中放置占位符元素。以下是如何执行此操作的一个很好的示例:DOM-to-canvas with D3.

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