svg - D3 Sunburst 文本的剪辑路径

Question

我正在尝试基于旭日形图实现 d3 可视化，并且我找到了一个几乎完美的在线示例，我已经开始使用
http://tributary.io/inlet/4127332/：

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

Answer 1

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

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

重要的部分是添加剪辑路径（注意使用新的 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 标记之后），但我认为这在技术上没有必要。