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

Question

I'm trying to create a pie chart for each value in the details array (see json file: https://dl.dropboxusercontent.com/u/23726217/timeline.json ). I'm having a difficult time mapping the data correctly.

I used this as an example although my version is quite a bit different - this generates multiple pies on a page via an array: http://bl.ocks.org/mbostock/1305337

This is what I currently have set up although it is broken right now because the values are not mapping correctly: http://jsfiddle.net/featherita/k8G5q/1/

This seems to be the part that is broken:

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

This is where the pie is called and then there is an area after this that appends a path to each g created in this one for the color application:

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

Let me know if I can provide any further clarification!

Answer 1

Take a look at this fiddle: http://jsfiddle.net/peterburrell/cvLHG/

I tried to provide a simplified example using your data to create a pie chart for each object in the details array. These are the key points, I think ...

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 + ")");

This creates a new svg element for each object in data.details . It looked like your example was appending svg elements to other svg elements.

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 + "%"; });

Then, for each data-bound object we draw the pie/donut chart paths using the data from pcArray .

Does that help at all?