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

【问题标题】：How to remove D3 link text from visualization如何从可视化中删除 D3 链接文本
【发布时间】：2015-12-07 20:19:06
【问题描述】：

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

这是相关的代码部分，最后一行 (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

【问题讨论】：

在定义linkText时，将标识符函数添加到您执行的连接中怎么样？尝试使用.data(links, function (d) { return d.target.id; }) 而不仅仅是.data(links)，就像您对path 选择变量所做的那样。
@jrsala 很好，我认为这会解决它，但它没有。对我来说奇怪的是，虽然我设置了 linkText = vis.selectAll('g.link-text').data(links)，但在我的 DOM 中没有类 link-text 的 g 元素。而是简单地有 text 内部带有 textPath 的节点。我想知道这是否是它无法正确删除 g.link-text 元素的原因，因为它们不知何故不存在。
哦，对...你从来没有真正创建 g 类 link-text 的元素！因此，当您再次运行更新功能时，选择为空。使用linkText = vis.selectAll('g.link-text').data(links); linkText.enter().append('g').attr('class', 'link-text').append('text')... bla bla。它发生在我身上很多次......我知道它不是 DRY，但这就是 D3 的工作原理，这就是为什么它令人惊讶，因为 D3 应该是 DRY

标签： javascript d3.js svg

【解决方案1】：

事实证明，没有创建类 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; }
);

【讨论】：