如何在3个饼图之上添加图例(请参阅this fiddle)。
我想指定淡蓝色对应于图例" 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); });
答案 0 :(得分:2)
您的数据阵列存在问题。这样:
{"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>