如何从可视化中删除D3链接文本 [英] How to remove D3 link text from visualization

问题描述

单击在我的力向可视化中的节点时，将打开/关闭任何子节点(及其关联的链接).但是，当删除了与它们关联的子节点和链接时，不会删除用作这些链接的标签的文本.见下文:

When nodes within my force directed visualization are clicked any child nodes (and their associated links) are toggled on/off. However, the text which acts as a label for these links is not removed when its associated child node and link are removed. See below:

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

Here is the relevant section of code, with the last line (linkText.exit.remove()) being my attempt at removing these labels:

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

Here is a link to a block as well: http://blockbuilder.org/MattDionis/5f966a5230079d9eb9f4

推荐答案

结果证明，没有创建类为 link-text 的 g 元素，因此退出选择是空的.

It turns out no g element with class link-text ever gets created, so the exit selection is empty.

替换

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;
            });

此外，有必要像为 path 一样为 linkText 指定标识符功能，否则d3无法将丢失的数据与退出选择相匹配！

Also, it's necessary to specify the identifier function for linkText just like you did for path, otherwise d3 cannot match the missing data with an exit selection!

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

这篇关于如何从可视化中删除D3链接文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！