是否可以啟動所有值為0的D3JS餅圖？

Question

我正在制作一個簡單的工具來顯示一組由用戶操縱的值。 我希望所有值都從0開始，並且在處理數據時從那里開始增長。

我進行了所有設置，但當我將所有值都從0開始時，控制台中出現錯誤。

這可能嗎？

這是我目前擁有的代碼（如果值大於0則可以使用）：

    var width = this.get('width');
    var height = this.get('height');
    var radius = Math.min(width, height) / 2;
    var color = this.get('chartColors');
    var data = this.get('chartData');

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


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


    var id = this.$().attr('id');
    var svg = d3.select("#"+id)
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll("path")
        .data(pie(data));

    g.enter()
        .append("path")
        .attr("d", arc)
        .each(function(d){ this._current = d; })
        .style("fill", function(d, i) { return color[i]; })
        .style("stroke", "white")
        .style("stroke-width", 2);

Answer 1

問題是一個概念上的問題-如果一切都為0，您將如何繪制餅圖？ 但是，您可以從一個空的數據集開始，並在數據大於零時添加新數據。 剩下的問題是使餅圖段從0增長到所需大小的動畫。

為此，您可以對從起始角度開始的餅圖段的末端角度進行動畫處理。 最簡單的方法是復制相應的數據對象並補間角度：

.each(function(d) {
    this._current = JSON.parse(JSON.stringify(d));
    this._current.endAngle = this._current.startAngle;
})
.transition().duration(dur).attrTween("d", arcTween);

這里是隨機的例子。