D3 force directed graph with images on canvas

Question

I'm trying to improve my D3 force directed graph's performance. Currently it uses SVG elements but as soon as the number of nodes reaches 500 and links ~ 2000 it becomes almost impossible to use. I'm looking at some alternative ways of rendering the graph.

Canvas seems to be a nice option : http://bl.ocks.org/mbostock/3180395

But is it possible to attach images to nodes on canvas as it's done here: http://bl.ocks.org/eesur/be2abfb3155a38be4de4

Thanks

Answer 1

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

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

为了了解您的优化是否正在改善效果，以及使用stats.js

之类的内容