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。 您应该从嵌套数组中返回值。