D3森伯斯特文本剪辑路径

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标签之后），但我不认为这在技术上是必要的。