Canvas中的D3力布局：添加＆amp;更新节点（＆amp; links）

Question

我正在处理一个大型数据集来渲染D3 force-layout，但是我意识到使用SVG时性能会受到很大影响。阅读画布中的渲染要好得多，所以我现在试着理解它。

我需要编写的一个功能是添加新节点和现有图表中的链接（没有刷新）以及新链接。有没有可以做到这一点的黑客攻击？由于canvas没有像SVG这样的DOM结构供我选择和更新......

引用此画布强制布局使用d3v4创建。 https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048

谢谢！

Answer 1

有一篇关于使用名为Working with D3.js and Canvas的画布的人非常好的帖子。

简而言之，我建议将一些数据绑定到一些虚拟HTML中，并使用它的结果来渲染输出。

首先创建一个可以使用的虚假DOM元素

const fakeContainer = d3.select(document.createElement("custom"));

现在数据绑定到它。注意，只创建一次，重新使用它来重新渲染。

const join = fakeContainer
        .selectAll("circle")
        .data(myData);

join.exit().remove();
join.enter().append("circle");

然后谈到渲染：

fakeContainer.each(function(d) {
    // Render a canvas circle
});