Question

我有一个简单的D3模拟，看起来像这样

当我点击＆＃39;删除1和4＆＃39;按钮我想从模拟中删除节点1和4。然而，结果如下：

视觉上似乎已经删除了3和4（不是1和4）。

我的代码如下。我需要做些什么才能使其正常工作？

我假设我从根本上误解了d3中更新节点的工作原理。任何帮助表示赞赏。

＆＃13;

<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>

＆＃13;

Answer 1

您可以通过向.data函数refresh内的nodeElement = nodeElement.data(nodesData, function(d){ return d.name });调用添加“密钥”功能来解决您的问题。{/ p>

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

有关详情，请参阅https://github.com/d3/d3-selection/blob/master/README.md#selection_data

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

1 个答案: