Javascript D3 v4-饼图，带有饼图外的连接器和点。

我正在尝试更改以下我开始使用的示例，以编辑这些行，使它们

• 从切片中心外5px开始
• 绕一个4px的圆圈

设计如下。我最初挣扎的主要部分是改变起点。我想，如果我能弄明白这一点，这个圆圈会很容易

如何实现这一目标，有什么建议吗

var svg=d3.选择（“主体”）
.append（“svg”）
.附加（“g”）
var IsCount=错误；
svg.append（“g”）
.attr（“类”、“切片”）；
svg.append（“g”）
.attr（“类别”、“标签”）；
svg.append（“g”）
.attr（“类别”、“行”）；
可变宽度=200，
高度=200，
半径=数学最小值（宽度、高度）/2，
转换速度=600；
var pie=d3.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.arc（）
.外表面（半径*0.8）
.内半径（IsCount？半径*0.4:0）；
var outerArc=d3.arc（）
.内半径（半径*0.9）
.外层（IsCount？半径*0.9:0）；
attr（“transform”、“translate”（+width/2+）、“+height/2+”）；
变量键=函数（d）{
返回d.data.label；
};
var color=d3.scaleOrdinal（）
.domain（[“Lorem ipsum”、“dolor sit”、“amet”、“Concetetur”]）/、“Adipising”、“elit”、“sed”、“do”、“eiusmod”、“Temporal”、“incididunt”
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
函数randomData（）{
var labels=color.domain（）；
返回labels.map（函数（标签）{
返回{
标签：标签，
值：Math.random（）
}
});
}
更改（随机数据（））；
d3.选择（“随机化”）
.on（“单击”，函数（）{
更改（随机数据（））；
});
功能更改（数据）{
/*----派片-------*/
var slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（饼图（数据），键）；
slice.enter（）
.插入（“路径”）
.样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
})
.attr（“类”、“切片”）
.合并（切片）
.transition（）.duration（转换速度）
.attrTween（“d”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
返回弧（插值（t））；
};
})
slice.exit（）
.remove（）；
/*----文本标签-------*/
var text=svg。选择（“.labels”）。选择全部（“文本”）
.数据（饼图（数据），键）；
函数midAngle（d）{
返回d.startAngle+（d.endAngle-d.startAngle）/2；
}
text.enter（）
.append（“文本”）
.attr（“dy”，“.35em”）
.文本（功能（d）{
console.log（d3.format（'.3f'）（d.data.value））
var showValue=true；
返回showValue？d3.格式（'.3f'）（d.data.value）：d.data.label；
})
.合并（文本）
.transition（）.duration（转换速度）
.attrTween（“转换”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2）；
位置[0]=半径*（中间角（d2）
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
宽度：960px；
高度：500px；
位置：相对位置；
}
svg{
宽度：100%；
身高：100%；
}
路径切片{
笔画宽度：2px；
}
多段线{
不透明度：.3；
笔画：黑色；
笔画宽度：1px；
填充：无；
}
.标签文本{
字体大小：12px；
}
c
您可以创建一个新的
弧
变量，并将
内半径
更改为更高的值。比如说

    var arc2 = d3.arc()
  .outerRadius(radius * 0.8 -10)
  .innerRadius(isDount ? radius * 0.4 : 0);

并在
attrween
&中引用它，并将其与值混在一起

return [arc2.centroid(d2), outerArc.centroid(d2), pos];

我还按照您想要的方式添加了圆圈：

  var circles = svg.selectAll(".circles")
    .data(pie(data));

  circles = circles.enter()
    .append("circle")
    .attr("class","circles")
    .attr("r",3)
    .attr("fill","#999")
    .merge(circles)

  circles.transition().duration(transitionSpeed)
    .attrTween("transform", function(d) {
      this._current = this._current || d;
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        var d2 = interpolate(t);
        var pos = outerArc.centroid(d2);
        pos[0] = radius * .95 * (midAngle(d2) < Math.PI ? 1 : -1);
        return "translate("+ circlesArc.centroid(d2) +")";
      };
    })
  circles.exit().remove();

c
更新了我的答案，将圆圈也包括在内。这对我帮助很大，解决了我所有的问题。我有点工作，但你的更好，因为我的动画cx和cy，它看起来很有趣。谢谢