製作不同大小的「半徑」以創建「弧形」不起作用

Question

我使用d3.js創建pie圖表。我想用動畫創建3個帶有單個svg元素的派。

這對我來說工作得很好。但是，創建不同的我每次使用循環減少radius。但radius沒有得到改變。 如何解決這個問題？

我的代碼（樣品）：

var array1 = [ 

    0,200 

] 

window.onload = function() { 

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

var color = d3.scale.category20(); 

var arc = null; 

var pie = d3.layout.pie() 
    .value(function(d) { 
     return d; }) 
    .sort(null); 

function tweenPie(finish) { 


    var start = { 
      startAngle: 0, 
      endAngle: 0 
     }; 
    var i = d3.interpolate(start, finish); 
    return function(d) { return arc(i(d)); }; 
} 

var svg1 = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 



    for(var i = 0; i < 3; i++) { 

    arc = d3.svg.arc() 
    .innerRadius(radius - (5*i)) //each time size differs 
    .outerRadius(radius - (6)*i); //each time size differs 

     svg1.append('g') 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
     .datum(array1).selectAll("path") 
     .data(pie) 
     .enter().append("path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .transition() 
     .duration(5000) 
     .attrTween('d', tweenPie) 

    } 

} 

Live Demo

Answer 1

有是在tweenPie方法，並在被用於循環單一圓弧變量。每次通過for循環時，弧變量都被設置爲一個新值。 for循環退出後，將爲每個餅圖調用tweenPie方法。因此，所有餅圖都使用了相同的tweenPie方法，該方法使用最後一個for循環中創建的圓弧。

對於每個餅圖，您需要創建一個單獨的具有自己的弧的tweenPie方法。例如...

var array1 = [ 0, 200 ] 

window.onload = function() { 

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

    var color = d3.scale.category20(); 

    var arc = null; 

    var pie = d3.layout.pie() 
     .value(function(d) { 
      return d; }) 
     .sort(null); 

    function getTweenPie(arc) { 
     return function (finish) { 
      var start = { 
       startAngle: 0, 
       endAngle: 0 
      }; 
      var i = d3.interpolate(start, finish); 
      return function(d) { return arc(i(d)); }; 
     } 
    } 

    var svg1 = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    for(var i = 0; i < 3; i++) { 

     arc = d3.svg.arc() 
      .innerRadius(radius - (5*i)) //each time size differs 
      .outerRadius(radius - (6)*i); //each time size differs 

     svg1.append('g') 
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
      .datum(array1).selectAll("path") 
      .data(pie) 
      .enter().append("path") 
      .attr("fill", function(d, i) { return color(i); }) 
      .transition() 
      .duration(5000) 
      .attrTween('d', getTweenPie(arc)) 

    } 

}