D3.js 更新会留下重复的 svg 元素

Question

我正在使用 D3.js 强制布局来创建图表。 要更新节点和边，我遵循示例代码 http://bl.ocks.org/mbostock/1095795。 这意味着我有这个代码来初始化布局：

var nodes   = [];
var edges   = [];
var force = d3.layout
                 .force()
                 .nodes(nodes)
                 .links(edges)
                 ... 
var link = svg.selectAll('.link');
var node = svg.selectAll('.node');

我在一个函数中更新数据：

//(nodes and edges array has been updated before)
link = link.data(force.links());
link.enter()
    .append('g')
    .attr('class', 'link');
link.append('line')
    .style('stroke-width', function (d) {
        return d.bond*2 + 'px';
    });
link.exit().remove();

node = node.data(force.nodes());
node.enter()
    .append('g')
    .attr('class', 'node')
    .call(force.drag);

node.append('circle')
    .attr('r', function (d) { return radius(d.size) })
    .style('fill', function (d) { return color(d.type) });
node.exit().remove();

force.start();

我检查了节点和边数组以及 force.nodes() 和 force.links() 的内容，看起来一切都是正确的， 但该图显示了先前数据的边缘。 因此，我还查看了 svg，似乎节点和边的组 (<g>) 分别包含多个“线”和“圆”元素：

<g class="link">
    <line x1="39.28621930166058" y1="256.22690655336356"
    x2="217.9040028325144" y2="12.304247302113906" 
    style="stroke-width: 2px;"></line>

    <line x1="199.64928632623412" y1="275.35140495955585"
    x2="275.5229250036658" y2="100.33170397523202"
    style="stroke-width: 2px;"></line>
</g> 

这同样适用于节点。

更新时如何从组中删除之前的元素？ 我似乎无法在链接示例或 d3 文档中找到答案。

Answer 1

link.enter()
    .append('g')
    .attr('class', 'link');
link.append('line')
    .style('stroke-width', function (d) {
        return d.bond*2 + 'px';
    });
link.exit().remove();

link 是 g.link 元素与您的数据的选择/数据连接。

查看上面的内容，您通过 .enter() 为每个新链接添加一个新的 g 元素，但随后您将一个新的 line 元素添加到新的和 现有 链接，因为没有 enter()预选赛。

试试

var newLinks = link.enter()
    .append('g')
    .attr('class', 'link');
newLinks.append('line')
    .style('stroke-width', function (d) {
        return d.bond*2 + 'px';
    });

PS。如果这适用于线路，那么节点的情况也是如此。