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 标签之后)，但我认为这在技术上没有必要。