svg - D3 Sunburst 文本的剪辑路径

Question

我正在尝试基于森伯斯特图实现 d3 可视化，并且我找到了一个几乎完美的在线示例，我已经开始工作 http://tributary.io/inlet/4127332/ :



我的主要问题是我还需要将文本剪辑到片段中，我曾尝试使用 svg 剪辑路径，但我微薄的 d3 技能让我失望。对此的任何帮助表示赞赏。

Answer 1

所以我第一次尝试剪辑文本没有奏效，我认为这是因为弧的坐标空间与文本的坐标空间不一致，如果您正在使用弧生成器，则您想要的方式与您一样。

我发现如果我将剪辑应用到您为每个节点制作的组，那么它就像一个魅力。有一个警告。当我尝试生成我的剪辑路径然后应用它们时，节点连接到元素的顺序不同，因此错误的路径剪辑了错误的文本。我通过向每个数据元素添加一个 id 来解决这个问题。可以看到最终版here

重要的部分是添加剪辑路径(注意新 id 字段的使用):

svg.append('defs')
   .selectAll("clipPath")
   .data(partition.nodes)
   .enter().append('svg:clipPath')
   .attr('id', function(d,i) { return d.id;})
   .append('path').attr('d', arc);

然后你只需要在你的节点组上引用它们(再次使用 id):

group = 
   svg.selectAll("g")
   .data(partition.nodes)
   .enter().append('svg:g')
   .attr('clip-path', function(d,i) { return 'url(#' + d.id + ')';});

在支流中，我将 svg 数据连接放在首位，以便“defs”节点出现在通常的位置(首先在 svg 标签之后)，但我认为这在技术上是不必要的。