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

【问题标题】：How to remove node in D3 force layout?如何删除 D3 强制布局中的节点？
【发布时间】：2025-11-30 11:05:01
【问题描述】：

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

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

从视觉上看，它似乎删除了 3 和 4（不是 1 和 4）。

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

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

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

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

您可以通过在refresh 函数内的.data 调用中添加“键”函数来解决您的问题：nodeElement = nodeElement.data(nodesData, function(d){ return d.name });。

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

【讨论】：