如何删除D3强制布局中的节点？

当我点击“删除1和4”按钮，我想从模拟删除节点1和4。的结果，然而，如下：

目视它似乎已除去3和4（未1和4）。

我的代码如下。任何想法，我需要做的，以使其正确工作？

我假设我从根本上误解了更新节点在d3中的工作原理。任何帮助赞赏。 nodeElement = nodeElement.data(nodesData, function(d){ return d.name });：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> 
 
<body> 
 
<button>remove 1 and 4</button> 
 
<script> 
 

 
var width = 400, 
 
    height = 400; 
 

 
var nodes = [1, 2, 3, 4].map(function(x) { return { name: x}}); 
 

 
var force = d3.layout.force() 
 
    .size([width, height]) 
 
    .nodes(nodes) 
 
    .linkDistance(30) 
 
    .charge(-500) 
 
    .on("tick", tick); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 
    
 
var content = svg.append("g"); 
 

 
var nodesData = force.nodes(), 
 
    nodeElement = content.selectAll(".node"); 
 
    
 
function tick() { 
 
    nodeElement.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
} 
 

 
d3.selectAll('button').on('click', function() { 
 

 
    //remove 1 and 4 
 
    nodesData = [ 
 
     nodesData[1], 
 
     nodesData[2] 
 
    ] 
 

 
    refresh(); 
 
}); 
 

 
var WIDTH = 100; 
 

 
// 
 
// this logic is slightly modified from http://bl.ocks.org/tgk/6068367 
 
// 
 
function refresh() { 
 
    
 
    force.nodes(nodesData) 
 

 
    nodeElement = nodeElement.data(nodesData); 
 

 
    var nodeGroup = nodeElement.enter() 
 
     .append('g') 
 
     .attr("class", "node"); 
 
      
 
    // node text 
 
    nodeGroup.append("text") 
 
     .attr("class", "nodetext") 
 
     .attr("dx", WIDTH/2) 
 
     .attr("dy", "14px") 
 
     .text(function(n) { return 'node '+n.name }) 
 

 
    nodeElement.exit().remove(); 
 

 
    force.start(); 
 
} 
 

 
refresh(); 
 

 
</script>

来源

2017-07-03 Tom G

您可以通过添加一个 “钥匙” 功能将.data调用refresh函数内解决您的问题。

您看到的问题不是特定于更新节点。通常，选择基于数据数组的索引工作。因此，如果第一个D3有[a,b,c,d]，现在它有[a,d]，它将采用前两个元素（[a,b]），除非您告诉它定义数组中每个项目的键。这就是上面的功能。

来源

2017-07-03 19:52:44 anbnyc

如何删除D3强制布局中的节点？

回答

相关问题