Javascript 如何将图例和标签添加到饼图中？

如何在3个饼图顶部添加图例（请参见）

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

我还想在每个饼图中添加数值。我尝试了这种方法，但随后图表消失了：

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

---

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

{"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数据=[
[{
“单件价值”：76.34，
名称：“AAA”
}, {
“单件价值”：69.05，
名称：“BBB”
}, {
“单件价值”：275.19，
名称：“CCC”
}],
[{
“单件价值”：69.93，
名称：“AAA”
}, {
“单件价值”：61.50，
名称：“BBB”
}, {
“单件价值”：153.31，
名称：“CCC”
}],
[{
“单件价值”：83.51，
名称：“AAA”
}, {
“单件价值”：69.14，
名称：“BBB”
}, {
“单件价值”：204.32，
名称：“CCC”
}]
];
var m=10，
r=100，
z=d3.scale.category20c（）；
var svg=d3.选择（“主体”）.选择全部（“svg”）
.数据（数据）
.enter（）.append（“svg”）
.attr（“宽度”（r+m）*2）
.attr（“高度”（r+m）*2）
.附加（“g”）
.attr（“转换”、“平移”（“+（r+m）+”，“+（r+m）+”）；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d.piecu值；
});
var arc=d3.svg.arc（）
.内半径（r/2.2）
.外层（r/1.2）
svg.selectAll（“路径”）
.数据（pie）
.enter（）.append（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d，i）{
返回z（i）；
});
svg.selectAll（“foo”）
.数据（pie）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“变换”，d=>“平移”（+弧形心（d）+”）
.text（d=>d.data.piece_值）；
svg.selectAll（“foo”）
.数据（d=>d）
.输入（）
.append（“文本”）
.attr（“transform”、（d，i）=>“translate”（+（-r+2.5*m+（i*70））+”、“+（-r+m）+”）
.text（d=>d.name）；
svg.selectAll（“foo”）
.数据（d=>d）
.输入（）
.append（“rect”）
.attr（“transform”、（d，i）=>“translate”（+（-r+m+（i*70））+”、“+（-r+”）
.attr（“宽度”，10）
.attr（“高度”，10）
.style（“fill”，（d，i）=>z（i））
您是在寻找特定的代码示例，还是仅仅是一些想法？您可以通过声明性地添加svg组标记并将其定位在元素中来添加图例，甚至更好，只需使用常规html标记并相应地设置它们的样式即可。定位html标记会更容易。@codeepic：我对d3和JavaScript几乎没有经验。因此，我正在寻找一个具体的代码块在小提琴，我张贴。同时，我也希望能对我的代码中的相应更改提出详细的意见。谢谢，谢谢。这完美地解决了我问题的第二部分。至于图例，我想在所有饼图的顶部看到一个水平图例，比如“浅蓝色-AAA”、“蓝色-BBB”、“深蓝色-CCC”（当然，浅蓝色等应该用相应颜色的小矩形代替）。