D3 v4：強制レイアウトの更新について

Question

Mike Bostock has an example強制レイアウトの更新に関して。この例はv3に基づいています - 同じ機能をv4でどのように複製できますか？

Here's my (pitiful) attempt。

私はを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-選択マージを必要としません。理由は、ノードの位置とリンクがシミュレーションによって更新されているためです。したがって、開始時にノードとリンクを追加する必要がありますが、位置の更新は、シミュレーションの開始時にstartメソッドの最後に行われます。

元のコードの大きな欠陥の1つは、スクリプトの初期段階でsvg.selectAll（ '。node'）& svg.selectAll（ '。link'）を呼び出したことでした。これを行うと、svgにバインドされたノードやリンクがないので、空のDOM要素でd3選択を取得します。これは、あなたがenter（）。append（）で要素を追加したいときには問題ありませんが、要素を削除するときには機能しません。これを使用して、exit（）。remove（）で要素を削除する古いd3選択はb/cで機能しません。削除するd3選択項目にDOM要素がありません。現在svgにあるDOM要素を取得するたびに、svg.selectAll（）を呼び出す必要があります。

また、コードを少し変更しました。通常、ノードの下に常にリンクが表示されるようにします。 SVGに要素を追加すると、最近追加されたノードが最上部に配置されます。しかし、手でグループを追加した場合（コードでlinkLayer & nodeLayerで行ったように）、新たに追加されたリンクはnodeLayerグループ内の項目の下に表示されます。