無法刪除D3.js中節點的子元素Force-Directed Graph

我正在使用D3.js Force-Directed Graph這樣的Demo here。例如，我修改了這段代碼，使用SVG圖像和標籤更改圓圈並鏈接到SVG路徑。點擊節點，它展開並摺疊子節點，意思是在節點的鼠標單擊上添加和移除子節點。無法刪除D3.js中節點的子元素Force-Directed Graph

添加新節點後，所有現有的節點也重新創建圖像和標籤，舊節點仍然存在，但我想只更新新的節點不影響現有的節點。

與刪除節點相同的問題，它應該用新節點替換舊節點，不向節點追加新元素不影響其他現有節點，只更改添加或刪除的節點。

function update() { 
    var nodes = flatten(root), 
     links = d3.layout.tree().links(nodes); 

    // Restart the force layout. 
    force.nodes(nodes) 
     .links(links) 
     .linkDistance(120) 
     .charge(-500) 
     .start(); 

    path = vis.selectAll("path.link"); 
    path = path.data(force.links()); 
    path.enter().append("svg:path") 
     .attr("class", "link") 
     .attr("marker-end", "url(#end)"); 

    path.exit().remove(); 
    node = vis.selectAll(".node"); 
    node = node.data(force.nodes()); 
    node.enter().append("g") 
     .attr("class", "node") 
     .on("click", click) 
     .call(force.drag); 

    node.append("image") 
     .attr("xlink:href", function (d) { 
     return "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX"; 
    }) 
     .attr("class", "image") 
     .attr("x", -15) 
     .attr("y", -15) 
     .attr("width", 24) 
     .attr("height", 24); 

    node.append("text") 
     .attr("class", "text") 
     .attr("x", 40) 
     .attr("dy", ".35em") 
     .style("fill", color) 
     .text(function (d) { 
     return d.name; 
    }); 

    node.exit().remove(); 
}

我用我的代碼here創建了一個小提琴。

來源

2013-05-16 Amit Rana

這裏我明白瞭如何刪除舊的節點和鏈路可見之前的版本增加兩個線.selectAll（「節點」）除去（）;和vis.selectAll（「path.link」）。remove（）;刪除舊的路徑和節點，但是繪製路徑通過節點，所以使得svg在更新上非常糟糕現在任何人都可以告訴我如何更新鏈接，因爲刪除節點工作正常，但是當我嘗試刪除路徑後添加新路徑創建節點.. :( –

需要刪除節點不是它裏面的DIV，只需force.start（）

vis.selectAll("path").remove(); 
vis.selectAll(".node").remove();

更新fiddle

來源

2013-05-28 08:32:10

無法刪除D3.js中節點的子元素Force-Directed Graph

回答

相關問題