我想要一个多层次的饼图,比如这里:
我唯一没有开始工作的是如何在饼图中添加文本。我希望每个部分都有一个标签。现在我知道如何为单级饼图执行此操作,但我在这个多级饼图中没有成功。例如,如果有人可以在 jsfiddle 上展示一个示例,那将不胜感激!
http://jsfiddle.net/Qh9X5/304/
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
Javascript
var dataset = {
apples: [33.3, 33.3, 33.4],
oranges: [12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5, 12.5],
lemons: [20, 20, 20, 20, 20],
};
var width = 660,
height = 500,
cwidth = 75;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });