d3.js多個甜甜圈圖

Question

我正在嘗試使用d3.js綁定到多個甜甜圈圖。

我有一個json變量

var json = [[{"label":"Value 1", "value":13}, {"label":"Value 2", "value":14}], [{"label":"value 4", "value":16},{"label":"value 5", "value":16},{"label":"value 6", "value":16}]];

我正在嘗試創建兩個dounut圖表，並將每個json對象的數據綁定到相應的圖表。

這是我的代碼段：

var color = d3.scale.category20();
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d){ return d.value;});
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
    .attr("width", width) 
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data([json]).enter().append("g");
var pieChart = 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) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

但我不斷收到此錯誤：

Error: Problem parsing d="M0,-31.5A31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 0,-60Z"

Error: Problem parsing d="MNaN,NaNA31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 NaN,NaNZ"

任何幫助，將不勝感激，謝謝。

Answer 1

在您的Pie函數定義中，您將返回不存在的d.value。 您應該從嵌套數組中返回值。