javascript - D3 力向图， Canvas 上带有图像

Question

我正在尝试提高 D3 力定向图的性能。目前它使用 SVG 元素，但一旦节点数量达到 500 个并且链接 ~ 2000 个，它就几乎无法使用。我正在寻找一些渲染图表的替代方法。

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

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

谢谢

Answer 1

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

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

为了了解您的优化是否以及提高了多少性能，请考虑使用类似 stats.js 的内容。