Question

我目前正在构建基于this脚本的d3.js脚本。我可以让图表完美地添加新节点，但是当涉及删除节点时，它会有一些麻烦。

如果我使用nodes.pop（）删除最后一个元素，它将正确运行，但是当使用nodes.shift（）删除第一个元素时，节点重绘不正确。例如，如果添加了4个节点，那么节点数组将变为：

    [0] = color.orange
    [1] = color.blue
    [2] = color.green
    [3] = color.green

然后调用nodes.shift（），第一个元素被正确移动，以便数组变为：

    [0] = color.blue
    [1] = color.green
    [2] = color.green

当在屏幕上绘制时，节点[0]（现在是蓝色）应保留在同一位置，但实际发生的是它移动到存储橙色圆圈的位置。蓝色圆圈的Cx和Cy值不会改变（该颜色的所有节点的中心），所以我不确定是什么导致了这种情况。如果我再次调用removeNode，元素将被正确移动，但索引1中的项目将移动到绘制蓝色圆圈的位置。我认为这可能是一个问题，节点数组被用来重绘，而元素仍然被移动，所以我使用了一个带有重绘回调的超时，但不幸的是这不起作用。我认为可能需要减少节点的id以匹配数组中的索引，但这也不起作用。

可以找到脚本here，但最初不会显示任何内容。使用控制台，调用addNode（）;几次看脚本如何运行。

Answer 1

我意识到我正在写这个我做错了什么。以下this教程告诉我，我需要在重绘的顶部调用circle = circle.data(force.nodes(), function(d) { return d.id;});，以便重绘现在看起来像

    var circle = svg.selectAll("circle");
    circle = circle.data(force.nodes(), function(d) { return d.id;});
    circle
    .enter().append("circle")
    .attr("cx", function(d) { return d.cx; })
    .attr("cy", function(d) { return d.cy; })
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d) { return d.color; });
    circle.exit().remove();
    force.start();

从节点中删除第一个项目后，无法在d3.js中正确重绘

1 个答案: