Canvas 中的 D3 强制布局：添加和更新节点（和链接）

Question

我正在处理一个大型数据集来渲染 D3 强制布局，但我意识到使用 SVG 会严重影响性能。阅读 canvas 中的渲染要好得多，所以我现在正在尝试理解它。

我需要编写代码的功能之一是在现有图形中添加新节点和链接（无需刷新），以及新链接。有什么办法可以做到这一点吗？由于 canvas 没有像 SVG 这样的 DOM 结构，所以我要 select 并更新...

我正在引用此 canvas 使用 d3v4 创建的强制布局。 https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048

谢谢！

Answer 1

有一个非常好的 post 是关于使用 canvas 的，叫做 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
});

D3 force layout in Canvas: adding & updating nodes (& links)