d3圓環圖在插值期間不需要的輪廓

Question

我一直在搞亂，試圖弄清爲什麼這個輪廓在圓環圖繪製時出現，然後一旦完成就消失。這是一個淺灰色的輪廓，這是出現插值/反彈的影響發生這種情況下的代碼和小提琴。謝謝你的幫助。

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)); }; 
} 

而這裏的小提琴：

http://jsfiddle.net/connorsan/SdN2F/18/

Answer 1

在tweenPie功能

，你必須在由startAngle和endAngle設置爲相同的值，使過渡，從一個點開始 - 否則繪製另一個弧來創建上述效果。嘗試

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

小提琴：http://jsfiddle.net/SdN2F/22/