D3 v4：更新力布局

Question

Mike Bostock has an example 关于更新部队布局。该示例基于 v3 — 如何在 v4 中复制相同的功能？

Here's my (pitiful) attempt.

我已阅读 the changes 到 v4 变更日志中的选择，但 merge 调用仍然令人困惑。特别是，我不清楚数据连接如何与模拟nodes() 和links() 调用交互。

Answer 1

var width = 300,
    height = 200;

var color = d3.scaleOrdinal(d3.schemeCategory20);

var nodes = [],
    links = [];

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

var svg = d3.select("svg");

var linkLayer = svg.append('g').attr('id','link-layer');
var nodeLayer = svg.append('g').attr('id','node-layer');

// 1. Add three nodes and three links.
setTimeout(function() {
  var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
  nodes.push(a, b, c);
  links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
  start();
}, 0);

// 2. Remove node B and associated links.
setTimeout(function() {
  nodes.splice(1, 1); // remove b
  links.shift(); // remove a-b
  links.pop(); // remove b-c
  start();
}, 2000);

// Add node B back.
setTimeout(function() {
  var a = nodes[0], b = {id: "b"}, c = nodes[1];
  nodes.push(b);
  links.push({source: a, target: b}, {source: b, target: c});
  start();
}, 4000);


function start() {
  var link = linkLayer.selectAll(".link")
    .data(links, function(d) { return d.source.id + "-" + d.target.id; });
  
  
  link.enter().append("line")
    .attr("class", "link");

  link.exit().remove();

  var node = nodeLayer.selectAll(".node")
      .data(nodes, function(d) { return d.id;});
  
  node.enter().append("circle")
      .attr("class", function(d) { return "node " + d.id; })
      .attr("r", 8);

  node.exit().remove();

  simulation
    .nodes(nodes)
    .on("tick", tick);

  simulation.force("link")
    .links(links);
}

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

  linkLayer.selectAll('.link').attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
}

.link {
  stroke: #000;
  stroke-width: 1.5px;
}

.node {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

.node.a { fill: #1f77b4; }
.node.b { fill: #ff7f0e; }
.node.c { fill: #2ca02c; }

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="300px" height="200px"></svg>

因此，您实际上并不需要 d3-selection-merge 来使您的示例工作。原因是您的节点位置和链接正在通过模拟进行更新。因此，您将希望在开始时添加节点和链接，但是对位置的任何更新都将在模拟开始时的 start 方法结束时发生。

原始代码的一个主要缺陷是您在脚本的初始阶段调用了 svg.selectAll('.node') & svg.selectAll('.link')。当你这样做时，没有任何节点或链接绑定到 svg，所以你会得到一个 d3-selection 与空的 DOM 元素。当您想使用 enter().append() 添加元素时，这很好 - 但是在删除元素时，这将不起作用。使用相同的，陈旧的 d3-selection 来删除带有 exit().remove() 的元素不起作用 b/c d3-selection 中没有任何要删除的 DOM 元素。您需要每次调用 svg.selectAll() 来获取当前在 svg 中的 DOM 元素。

我还对您的代码做了一些小改动。您通常希望链接始终显示在节点下方。当您向 SVG 添加元素时，最近添加的节点位于顶部。但是，如果您事先添加组（就像我在代码中使用 linkLayer 和 nodeLayer 所做的那样），任何新添加的链接都将出现在 nodeLayer 组中的任何项目下方。