D3 强制有向图与画布上的图像

【问题标题】：D3 force directed graph with images on canvasD3 强制有向图与画布上的图像
【发布时间】：2016-11-13 23:26:18
【问题描述】：

我正在尝试提高我的 D3 力有向图的性能。目前它使用 SVG 元素，但一旦节点数量达到 500 和链接〜 2000 就几乎不可能使用。我正在寻找一些替代方法来呈现图表。

Canvas 似乎是一个不错的选择： http://bl.ocks.org/mbostock/3180395

但是是否可以像这里那样将图像附加到画布上的节点： http://bl.ocks.org/eesur/be2abfb3155a38be4de4

谢谢

【问题讨论】：

标签： javascript canvas d3.js svg graph

【解决方案1】：

您可以使用drawImage()。这里是some documentation

是的，画布是一种很好的方法或加快速度——在合理范围内。无论您如何渲染，力布局本身都会占用大量 CPU 周期，而且您的数字已经相当高了。此外，虽然以 60fps（fps = 每秒帧数）将 500 个圆圈渲染到画布中应该是可行的，但另外渲染 2000 个链接也已经开始减慢速度。不过，它会比 SVG 好得多。

为了了解您的优化是否以及在多大程度上提高了性能，请考虑使用类似stats.js

【讨论】：

@andreybavt，除了meetamit的建议，我推荐采用d3v4，它包含更好的canvas support。