D3 JS多層餅圖動畫

Question

我創建了一個多級餅圖，但在加載時無法為其設置動畫。 這是我嘗試過的JS，動畫在圖表的第一個圓上工作正常，但隱藏了其他2。

任何幫助將不勝感激。謝謝：）

<script>
var dataset = {
  final: [7000],
  process: [1000, 1000, 1000, 7000],
  initial: [10000],
};

var width = 660,
    height = 500,
    cwidth = 75;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("class","wrapper")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var gs = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return Object.keys(dataset)[i];
        });

var gsLabels = svg.selectAll("g.wrapper").data(d3.values(dataset)).enter()
        .append("g")
        .attr("id",function(d,i){
            return "label_" + Object.keys(dataset)[i];
        });

var count = 0;
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { 
        if(Object.keys(dataset)[j] === "final"){
            return arc.innerRadius(cwidth*j).outerRadius(cwidth*(j+1))(d); 
        }
        else{
            return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); 
        }
        })
    .transition().delay(function(d, i, j) {
            return i * 500; 
    }).duration(500)
    .attrTween('d', function(d,x,y) {
       var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
       return function(t) {
           d.endAngle = i(t);
         return arc(d);
       }
    });


    </script>

Answer 1

主要問題是，您對所有不同的餅圖段都使用了相同的電弧生成器。 這意味着在過渡之后，所有線段都將具有相同的內部和外部半徑-它們在那里，您看不到它們，因為它們被外部藍色線段所遮蓋。

要解決此問題，請對不同級別使用不同的電弧發生器。 您還需要將d屬性初始化為零寬度（即，開始角度和結束角度相同），動畫才能正常工作。

我在這里實現了一個解決方案，其中為每個餅圖段保存了一個弧生成器，並為其分配了數據。 這有點浪費，因為每個級別只有一個生成器就足夠了，但是實現起來更快。 相關代碼如下。

var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { 
    d._tmp = d.endAngle;
    d.endAngle = d.startAngle;
    if(Object.keys(dataset)[j] === "final"){
        d.arc = d3.svg.arc().innerRadius(cwidth*j).outerRadius(cwidth*(j+1)); 
    }
    else{
        d.arc = d3.svg.arc().innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1)); 
    }
    return d.arc(d);
    })
.transition().delay(function(d, i, j) {
        return i * 500; 
}).duration(500)
.attrTween('d', function(d,x,y) {
   var i = d3.interpolate(d.startAngle, d._tmp);
   return function(t) {
       d.endAngle = i(t);
     return d.arc(d);
   }
});