D3 v4: Zaktualizuj układ sił

Question

Mike Bostock has an example dotyczące aktualizacji układu sił. Przykład oparty jest na v3 - w jaki sposób można replikować tę samą funkcjonalność w wersji v4?

Here's my (pitiful) attempt.

Czytałem the changes do wyborów w v Changelog v4, ale wywołanie merge jest nadal mylące. W szczególności nie jest dla mnie jasne, w jaki sposób połączenie danych współdziała z wywołaniem symulacji nodes() i 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>

Więc właściwie nie potrzebują d3 selekcja seryjnej, aby dokonać przykładową pracę. Powodem jest to, że pozycje węzła i łącza są aktualizowane przez symulację. Więc będziesz chciał dodać węzły i łącza na początku, ale jakiekolwiek uaktualnienie pozycji nastąpi pod koniec metody startu, gdy symulacja zostanie rozpoczęta.

Jedną z głównych wad oryginalnego kodu było to, że wywołałeś svg.selectAll (". Node") & svg.selectAll ("link") na początkowych etapach skryptu. Gdy to zrobisz, nie ma żadnych węzłów lub łączy powiązanych z svg, więc otrzymasz selekcję d3 z pustymi elementami DOM. Jest to dobre, gdy chcesz dodać elementy za pomocą metody enter(). Append() - jednak podczas usuwania elementów nie będzie działać. Używanie tego samego, przestarzałego selekcji d3 do usuwania elementów przy pomocy exit(). Remove() nie działa b/c nie ma żadnych elementów DOM w selekcji d3 do usunięcia. Musisz wywołać svg.selectAll() za każdym razem, aby uzyskać elementy DOM, które aktualnie znajdują się w svg.

Wprowadziłem również kilka drobnych zmian w twoim kodzie. Zwykle chcesz, aby linki zawsze wyświetlały się pod węzłami. Podczas dodawania elementów do SVG, ostatnio dodane węzły są umieszczane u góry. Jednak jeśli dodasz grupy przed ręką (tak jak zrobiłem to z linkiem linkLayer & nodeLayer w kodzie), wszystkie nowo dodane linki pojawią się poniżej dowolnych pozycji w grupie nodeLayer.