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組中的任何項目的下方。