Question

我正在尝试为details数组中的每个值创建一个饼图（请参阅json文件：https://dl.dropboxusercontent.com/u/23726217/timeline.json）。我很难正确地映射数据。

我用这个作为例子虽然我的版本有点不同 - 这会通过数组在页面上生成多个馅饼： http://bl.ocks.org/mbostock/1305337

这是我目前设置的，虽然它现在被打破，因为值未正确映射： http://jsfiddle.net/featherita/k8G5q/1/

这似乎是被打破的部分：

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

这是调用饼图的位置，然后在此之后有一个区域，为每个为此颜色应用程序创建的g附加一个路径：

var g = svg.selectAll("g")
    //.data(pie(data.details))
    .data(function (d) { return pie(d.values); })
    .enter().append("svg:g");

如果我能提供进一步的澄清，请告诉我们！

Answer 1

看看这个小提琴：http://jsfiddle.net/peterburrell/cvLHG/

我尝试使用您的数据提供一个简化示例，为details数组中的每个对象创建一个饼图。这些是关键点，我认为......

var svg = d3.select("body")
    .selectAll("svg")
    .data(data.details)
    .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

这会为svg中的每个对象创建一个新的data.details元素。您的示例似乎是将svg元素附加到其他svg元素。

var g = svg.selectAll("g")
    .data(function (d) { return pie(d.pcArray); })
    .enter().append("g");

g.append("path")
    .attr("d", arc)
    .style("fill", function (d) { return color(d.value); })
    .append("title")
    .text(function (d) { return d.data + "%"; });

然后，对于每个数据绑定对象，我们使用pcArray中的数据绘制饼图/圆环图表路径。

这有帮助吗？

d3将数据值映射到多个饼图

1 个答案: