javascript - d3.js 多个圆环图

Question

我正在尝试使用 d3.js 绑定(bind)到多个圆环图。

我有一个 json 变量

var json = [[{"标签":"值 1", "值":13}, {"标签":"值 2", "值":14}],
[{“标签”:“值4”，“值”:16}，{“标签”:“值5”，“值”:16}，{“标签”:“值6”，“值”:16 }]];

我正在尝试创建两个圆环图并将每个 json 对象中的数据绑定(bind)到相应的图表。

这是我的代码片段:

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); });

但我不断收到此错误:

错误:解析时出现问题 d="M0,-31.5A31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 0,-60Z"

错误:解析时出现问题 d="MNaN,NaNA31.5,31.5 0 1,1 NaN,NaNLNaN,NaNA60,60 0 1,0 NaN,NaNZ"

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

在饼图函数定义中，您返回的 d.value 不存在。您应该从嵌套数组中返回值。