其基本思想是围绕链接绘制一系列弧，并按弧的宽度将标签向外分流。

V4溶液

linked block中d3 v4代码的工作修改如下：
第一个
您可以看到为绘制和标记圆弧而添加的离散代码块-用于计算圆弧生成器的起始Angular 和终止Angular 的关键位为：

var leafGroups = d3.nest()
    .key(function(d) { return d.parent.data.name.split(".")[1]; })
    .entries(root.leaves())
    
  var arcAngles = leafGroups.map(function(group) {
    return {
      name: group.key,
      min: d3.min(group.values, function(d) { return d.x }),
      max: d3.max(group.values, function(d) { return d.x })
    }
  });

对于leafGroups，nest函数通过关键字的第二项对层次结构的叶子进行分组，例如flare.analytics.cluster = analytics和flare.vis.operator.distortion = vis。对于不同的数据集，您需要考虑一个选择，例如，叶子是否始终处于一致的深度;标签始终是唯一的。定义“父组”可以是自上而下定义，也可以是自下而上定义。
对于arcAngles，您只需要每个组的最小值和最大值，然后您就可以继续绘制弧并标记它们。我从here中提取了一些标记，这是一篇关于在d3中标记弧的很棒的文章。您需要再次考虑一下这一点，因为如果标记对于弧来说太长，它看起来就不太好了-请参见示例中的“Display”标签。
另一个变化是在下面：

node = node
    .data(root.leaves())
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", "0.31em")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8 + arcWidth) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .text(function(d) { return d.data.key; })
      .on("mouseover", mouseovered)
      .on("mouseout", mouseouted);

请注意，在设置transform属性时需要添加arcWidth-这会向外移动节点标签以容纳弧。

V6+溶液

在Observable HQ页面中有一个使用d3 v6的新版本的分层边绑定（也是Mike Bostok的）。我们可以添加类似的代码来识别组，获得Angular 的最小值/最大值，并将标签向外推一点以容纳弧。
第一个
需要注意的一些差异：

• hierarchy函数与原始块中的packageHierarchy函数不同-看起来我们不再拥有层次结构的完整路径，因此flare.vis.data.EdgeSprite与flare.data.DataField存在歧义，即两个叶子可以在层次结构的不同分支中拥有相同的“父”。
• 我已经修复了输入，以适应，但它改变了如何确定'父组'，即自下而上与自上而下在原来的。
• nest已删除，因此您可以改用groups
• 在v4中，对象的Angular 似乎是以度来定义的，但在v6中，它们是以弧度来定义的--所以你会在v4版本中看到一些* Math.PI / 180，而在v6中看不到--但这只是度/弧度的转换。
• 对于长标签，我使用了一个阈值，即弧必须至少为6度长，否则标签将无法放置（.text((d, i) => ((d.end - d.start) < (6 * Math.PI / 180)) ? "" : d.name);）