如何从可视化中删除D3链接文本

Question

当点击我的强制定向可视化中的节点时，任何子节点（及其相关链接）都会打开/关闭。但是，当删除其关联的子节点和链接时，不会删除充当这些链接的标签的文本。见下文：

以下是代码的相关部分，最后一行（linkText.exit.remove()）是我尝试删除这些标签：

var nodes = flatten(data);
var links = d3.layout.tree().links(nodes);

var path = vis.selectAll('path.link')
  .data(links, function(d) {
    return d.target.id;
  });

path.enter().insert('svg:path')
  .attr({
    class: 'link',
    id: function(d) {
      return 'text-path-' + d.target.id;
    },
    'marker-end': 'url(#end)'
  })
  .style('stroke', '#ccc');

var linkText = vis.selectAll('g.link-text').data(links);

linkText.enter()
  .append('text')
    .append('textPath')
      .attr('xlink:href', function(d) {
        return '#text-path-' + d.target.id;
      })
      .style('text-anchor', 'middle')
      .attr('startOffset', '50%')
      .text(function(d) {return d.target.customer_id});

path.exit().remove();

linkText.exit().remove();

这也是一个块的链接：http://blockbuilder.org/MattDionis/5f966a5230079d9eb9f4

Answer 1

事实证明，没有创建类g的{​​{1}}元素，因此退出选择为空。

替换

link-text

与

linkText.enter()
    .append('text')
        .append('textPath')
        .attr('xlink:href', function(d) {
            return '#text-path-' + d.target.id;
        });

此外，有必要像linkText.enter() .append('g') .attr('class', 'link-text') .append('text') .append('textPath') .attr('xlink:href', function(d) { return '#text-path-' + d.target.id; }); 一样为linkText指定标识符功能，否则d3与退出选择的丢失数据不匹配！

path