D3js餡餅動畫加載不工作

Question

我想在d3中使用attrTween來加載頁面時動畫餅圖，但它不適合我。我之前使用attrTween來動畫化數據更改，並且它工作正常，但是這次我想在頁面首次加載時「增長」餅圖，但它不像預期的那樣運行，而且我也沒有收到任何有關的信息爲什麼這是。 如果我刪除線.attrTween('d' arcTweenStart);然後一切工作正常，除非它不動畫。如果線路留在那裏，則不顯示任何內容，並且從不輸入功能arcTweenStart。任何人都可以發現我要去哪裏嗎？

function drawCharts() 
{ 
    // Create the chart and bind the data to it and position it 
    var pieChart = d3.select("#groupRisk").selectAll("svg") 
     .data(dataSet) // Bind the data to the chart 
     .enter().append("svg") 
      .attr("id", "pie") 
      .attr("width", w) // Set th width 
      .attr("height", h) // Set the height 
     .append("g") 
      .attr("transform", "translate(" + radius + "," + radius + ")"); // Position the chart 

    // Create the pie chart layout 
    var pie = d3.layout.pie() 
     .value(function(d) { return d.count; }) 
     .sort(null); // Sort is set to null to allow for better looking tweens 

    // Create "slices" for each data element 
    var arcs = pieChart.selectAll("g.slice") 
     .data(pie) // Bind the pie layout to the slices 
     .attr("id", "arcs") 
     .enter() 
      .append("g") 
      .attr("class", "slice"); 

    // Create the graphics for each slice and colour them 
    arcs.append("path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .attr("d", arc) 
     .each(function(d) { this._current = d; }) 
      .transition() 
      .duration(500) 
      .attrTween('d' arcTweenStart); 

} 

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

編輯： 我的數據集是這樣的：

var dataSet= 
[ 
    [ 
     { "label": "Green", "count": 40 }, 
     { "label": "Amber", "count": 50 }, 
     { "label": "Red", "count": 10 } 
    ], 
    [ 
     { "label": "Green", "count": 20 }, 
     { "label": "Amber", "count": 30 }, 
     { "label": "Red", "count": 50 } 
    ], 
    [ 
     { "label": "Green", "count": 50 }, 
     { "label": "Amber", "count": 20 }, 
     { "label": "Red", "count": 30 } 
    ] 
]; 

我有一組數據集，所以我想畫爲每一個圖表。

Answer 1

你不顯示您的dataSet變量保存什麼，但假設你的數據看起來像這樣（，將有真正幫助回答這個問題！）：

var dataSet = [{ 
    count: 4 
    }, { 
    count: 5 
    }, { 
    count: 6 
}]; 

你不需要做第一個綁定/輸入：

d3.select("#groupRisk").selectAll("svg") 
    .data(dataSet) // Bind the data to the chart 
    .enter() 
    ... 

這將爲您提供數據中每個條目的餅圖。擺脫的是，你的綁定就變成了：

var arcs = pieChart.selectAll("g.slice") 
    .data(pie(dataSet)) //<-- call pie with the dataSet 
    .attr("id", "arcs") 
    .enter() 
    .append("g") 
    .attr("class", "slice"); 

但實際上你的問題的心臟，你的吐溫var start，具有相同的開始/結束角度要結束。所以，你一遍又一遍地做同樣的事情。我覺得你的意思是：

function arcTweenStart(b) { 
    var start = { 
    startAngle: b.startAngle, 
    endAngle: b.startAngle //<-- set end to start and adjust on each call 
    }; 
    var i = d3.interpolate(start, b); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

哦，在那裏過一個錯字：

.attrTween('d' arcTweenStart); //<-- comma missing between 'd' and arcTweenStart 

例here。