如何在底層數據更改時更新D3強制佈局的元素

Question

我正在使用其中一個強制佈局示例（http://bl.ocks.org/1153292）在我的網站上顯示網絡。

我允許用戶選擇在任何給定時間查看哪種類型的鏈接。我注意到，當我選擇查看鏈接類型A時，然後添加鏈接類型B，然後刪除鏈接類型A，類型B的剩餘鏈接以A顏色呈現。

這是將鏈接添加到svg圖的代碼。我正在通過添加和刪除鏈接來更改數組this.links。正如你可以看到我設置類屬性，但它並沒有更新 - 它仍然類型的鏈接A.的

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(this.links) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

我目前通過更新蜱函數內部的階級屬性，解決此問題，但這種偏離航線的原因很多不需要的工作。

我讀到enter操作返回存在的元素的合併選擇，也是新的，因此attr操作應該更新存在的元素並設置新元素。

我錯過了什麼？

Answer 1

我發現answer in this post

var circle = svg.selectAll("circle") 
    .data(data); 

circle.enter().append("circle") 
    .attr("r", 2.5); 

circle 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 

circle.exit().remove(); 

答案是，我需要調用ATTR操作上selectAll.data的結果，而不是追加操作的結果。

Answer 2

在http://bl.ocks.org/1095795上有一個示例，它顯示了從強制導向佈局中添加和刪除節點。鏈接和節點必須單獨處理，然後強制佈局必須重新啓動。

function restart() { 
    var link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.source.id + "-" + d.target.id; }); 

    link.enter().insert("svg:line", "g.node") 
     .attr("class", "link"); 

    link.exit().remove(); 

    var node = vis.selectAll("g.node") 
     .data(nodes, function(d) { return d.id;}); 

    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .call(force.drag); 

    nodeEnter.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png") 
     .attr("x", "-8px") 
     .attr("y", "-8px") 
     .attr("width", "16px") 
     .attr("height", "16px"); 

    nodeEnter.append("svg:text") 
     .attr("class", "nodetext") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.id }); 

    node.exit().remove(); 

    force.start(); 
}