如何在饼图中添加图例和标签？

Question

How can I add a legend on top of 3 pie charts (see this fiddle ).

I want to specify that the light blue color corresponds to the legend "AAA", medium blue is "BBB" and blue is "CCC".

Also I would like to add numeric values inside each piece of pie. I tried this approach, but then the charts disappear:

var data = [
  [{"piece_value",76.34}, {"piece_value",69.05}, {"piece_value",275.19}],
  [{"piece_value",69.93}, {"piece_value",61.50}, {"piece_value",153.31}],
  [{"piece_value",83.51}, {"piece_value",69.14}, {"piece_value",204.32}]
];

svg.selectAll("path")
    .data(d3.layout.pie().value(function(d) { return d.piece_value; }))
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(r / 2)
        .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

UPDATE:

I also tried this, but the same result:

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

svg.selectAll("path")
    .data(pie(data))
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .innerRadius(r / 2)
        .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

Answer 1

You have a problem with your data array. This:

{"piece_value",76.34}

Is not a proper object. It should have a colon between the name and the value:

{"piece_value": 76.34}

So, let's change your data for this:

var data = [
    [{"piece_value":76.34, name:"AAA"}, {"piece_value":69.05, name:"BBB"}, {"piece_value":275.19, name:"CCC"}],
    [{"piece_value":69.93, name:"AAA"}, {"piece_value":61.50, name:"BBB"}, {"piece_value":153.31, name:"CCC"}],
    [{"piece_value":83.51, name:"AAA"}, {"piece_value":69.14, name:"BBB"}, {"piece_value":204.32, name:"CCC"}]
];

And set the variables for the layout and the arc generator:

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

var arc = d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r);

For adding the values in each pie, you can use arc.centroid :

svg.selectAll("foo")
    .data(pie)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("transform", d => "translate(" + arc.centroid(d) + ")")
    .text(d => d.data.piece_value);

For creating the legend, add the rectangles and the texts using the inner arrays:

svg.selectAll("foo")
    .data(d => d)
    .enter()
    .append("rect")

Here is the demo:

 var data = [ [{ "piece_value": 76.34, name: "AAA" }, { "piece_value": 69.05, name: "BBB" }, { "piece_value": 275.19, name: "CCC" }], [{ "piece_value": 69.93, name: "AAA" }, { "piece_value": 61.50, name: "BBB" }, { "piece_value": 153.31, name: "CCC" }], [{ "piece_value": 83.51, name: "AAA" }, { "piece_value": 69.14, name: "BBB" }, { "piece_value": 204.32, name: "CCC" }] ]; var m = 10, r = 100, z = d3.scale.category20c(); var svg = d3.select("body").selectAll("svg") .data(data) .enter().append("svg") .attr("width", (r + m) * 2) .attr("height", (r + m) * 2) .append("g") .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")"); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.piece_value; }); var arc = d3.svg.arc() .innerRadius(r / 2.2) .outerRadius(r/1.2) svg.selectAll("path") .data(pie) .enter().append("path") .attr("d", arc) .style("fill", function(d, i) { return z(i); }); svg.selectAll("foo") .data(pie) .enter() .append("text") .attr("text-anchor", "middle") .attr("transform", d => "translate(" + arc.centroid(d) + ")") .text(d => d.data.piece_value); svg.selectAll("foo") .data(d=>d) .enter() .append("text") .attr("transform", (d,i)=>"translate(" + (-r + 2.5*m + (i * 70)) + "," + (-r + m) + ")") .text(d=>d.name); svg.selectAll("foo") .data(d=>d) .enter() .append("rect") .attr("transform", (d,i)=>"translate(" + (-r + m + (i * 70)) + "," + (-r) + ")") .attr("width", 10) .attr("height", 10) .style("fill", (d, i) => z(i)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>