javascript - 如何为饼图添加图例和标签？

Question

如何在 3 个饼图之上添加图例(参见 this fiddle)。

我想指定浅蓝色对应图例“AAA”，中蓝色对应“BBB”，蓝色对应“CCC”。

我还想在每 block 馅饼中添加数值。我试过这种方法，但随后图表消失了:

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

更新:

我也试过了，结果一样:

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

您的数据数组有问题。这:

{"piece_value",76.34}

不是一个合适的对象。它应该在名称和值之间有一个冒号:

{"piece_value": 76.34}

那么，让我们为此更改您的数据:

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 pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
        return d.piece_value;
    });

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

要在每个饼图中添加值，您可以使用 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);

为了创建图例，使用内部数组添加矩形和文本:

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

这是演示:

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>