Javascript d3圆环图插值期间不需要的轮廓

我一直在胡思乱想，试图弄清楚为什么这个轮廓在油炸圈饼图绘制时出现，然后在完成后消失。这是一个浅灰色的轮廓，当插值/反弹影响发生时会出现这种轮廓。这是代码和小提琴。谢谢你的帮助

var data = [ 
    {name: "Yo", value: 5500},
    {name: "Dawg", value:  3800},
    {name: "Dis", value:  2500},
    {name: "Pie", value:  2000},
    {name: "Doe", value:  1500},
    {name: "Yo", value: 5000}
];

var margin = {top: 40, right: 20, bottom: 20, left: 20};
    width = 400 - margin.left - margin.right;
    height = width - margin.top - margin.bottom;

var chart = d3.select("body")
                .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
               .append("g")
                .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");



var radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(['red', 'blue', 'yellow', 'orange', 'green', '#ffffff']);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 20);

var myScale = d3.scale.linear().domain([0, 360]).range([0, 2 * Math.PI]);

var pie = d3.layout.pie()
    .sort(null)
    .startAngle(myScale(45))
    .endAngle(myScale(405))
    .value(function(d) { return d.value; });

var g = chart.selectAll(".arc")
.data(pie(data))
.enter().append("g")
  .attr("class", "arc");

g.append("path").attr("fill", function(d, i) { return color(i); })
 // .attr("d", arc)
.transition()
    .ease("bounce")
    .duration(2000)
    .attrTween("d", tweenPie);

function tweenPie(b) {
    var i = d3.interpolate({startAngle: myScale(45), endAngle: myScale(405)}, b);
  return function(t) { return arc(i(t)); };
}

这是小提琴：

---

在tweenPie函数中，必须将startAngle和endAngle设置为相同的值，以便过渡从一个点开始，否则它会绘制另一条弧，从而产生上述效果。试一试

function tweenPie(b) {
    var i = d3.interpolate({startAngle: myScale(45), endAngle: myScale(45)}, b);
  return function(t) { return arc(i(t)); };

---

小提琴手：

非常感谢，刚刚开始摆弄插值。