D3 v4：更新强制布局

Question

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

Here's my (pitiful) attempt。

我读过the changes在v4 Changelog中的选择，但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选择合并，使您的工作例子。原因是您的节点位置和链接正在被模拟更新。因此，您需要在开始时添加节点和链接，但在开始模拟时，在开始方法结束时会发生任何位置更新。

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

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