javascript - 如何从可视化中删除 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();

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

Answer 1

g class link-text 曾经创建 g 元素，因此退出选择为空。

替换

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 指定标识符函数，就像您为 path 所做的那样，否则D3无法与退出选择匹配丢失的数据!

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