.data() 处的 D3 新数据使 svg 重绘而不是更新节点位置

Question

考虑到这个工作示例，数据更新使 svg 更新而无需重新绘制。相关的原始代码部分使其行为如解释：

// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);

// DATA JOIN
node = node.data(graph.nodes);

simulation.force("link")
    .links(firstLinks ? graph.links1 : graph.links2);

但是，如果节点和链接数据引用是新的，即使内容相同，每次更新时也会重新绘制 svg。相关的更改代码部分使其行为如解释：

var new_graph_http_data = fetchNewData(); // unreferenced new data copy from graph

// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

// DATA JOIN
node = node.data(new_graph_http_data.nodes);

simulation.force("link")
    .links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

在这里，在函数 update() 中，调用 update_local() 将使图形按预期工作。调用 update_http() 将使图形重新绘制。

// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);

// DATA JOIN
node = node.data(graph.nodes);

simulation.force("link")
    .links(firstLinks ? graph.links1 : graph.links2);

var new_graph_http_data = fetchNewData(); // unreferenced new data copy from graph

// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

// DATA JOIN
node = node.data(new_graph_http_data.nodes);

simulation.force("link")
    .links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);

在 Firefox 78.6.0esr 和 Chrome 86.0.4240.111 中使用 D3 v4.13.0 和 D3 v6.3.1 进行测试。开发工具不会抛出任何错误。

谢谢。

Answer 1

虽然您关注的是进入/更新/退出循环，但问题在于 d3-force：代表节点本身的对象存储自己的位置数据。

D3-force 修改每个节点的数据以包含位置属性。这些属性是 tick 函数用来放置节点的属性：

node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
})

除了d.x和之外d.y，还有d.vx和d.vy属性。如果节点不具有这些属性，则力将创建并分配它们。如果删除所有节点并将它们替换为不带x,y属性的新对象，则力将创建并初始化这些属性，而不考虑以前的节点（毕竟，它们不再是模拟的一部分。从视觉上看，这将使其看起来所有旧节点/链接都已退出并进入了新节点/链接）。

如果通过（重新）加载节点将对象替换为新对象，并且新对象旨在位于旧节点所在的位置，则如果您想要从旧节点到新对象，可以将节点的x, y, dx,属性转移dy，例如：

  var old = simulation.nodes()
  newGraph.nodes.forEach(function(node,i) {
       node.x = old[i].x;
       node.y = old[i].y;
       node.vx = old[i].vx;
       node.vy = old[i].vy;
  })

更新小提琴

node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
})

  var old = simulation.nodes()
  newGraph.nodes.forEach(function(node,i) {
       node.x = old[i].x;
       node.y = old[i].y;
       node.vx = old[i].vx;
       node.vy = old[i].vy;
  })