javascript D3.js - 多环圆环图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17507728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3.js - Donut charts with multiple rings
提问by CLiown
The following example shows a donut chart in D3.js, is it possible to add more than one ring to the chart?
以下示例显示了 D3.js 中的圆环图，是否可以向图表添加多个环？
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
Example: http://jsfiddle.net/gregfedorov/Qh9X5/9/
示例：http: //jsfiddle.net/gregfedorov/Qh9X5/9/
So in my data set I want something like the following:
所以在我的数据集中，我想要如下内容：
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
oranges: [53245, 28479, 19697, 24037, 40245],
lemons: [53245, 28479, 19697, 24037, 40245],
pears: [53245, 28479, 19697, 24037, 40245],
pineapples: [53245, 28479, 19697, 24037, 40245],
};
What I want is to have 5 rings in total all around the same central point, is this possible and does anyone have an example?
我想要的是在同一个中心点周围总共有 5 个环，这可能吗，有人有例子吗？
回答by Lars Kotthoff
Yes, you can do this quite easily. The key is to use nested selections. That is, you pass in your top level list of lists and create a container element for each list. Then you do the nested selection and draw the actual elements. In this particular case, you also need to adjust the radii of the arcs so that they don't overlap.
是的，你可以很容易地做到这一点。关键是使用嵌套选择。也就是说，您传入列表的顶级列表并为每个列表创建一个容器元素。然后进行嵌套选择并绘制实际元素。在这种特殊情况下，您还需要调整圆弧的半径，使它们不重叠。
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);
});
Updated jsfiddle here.
在这里更新了 jsfiddle 。
回答by Randolpho
Using the fiddle you posted, there is an "arc" defined in the fiddle here:
使用您发布的小提琴，此处的小提琴中定义了一个“弧”：
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
That arc is what's used to build the ring graph here:
这条弧是用来在这里构建环形图的：
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
So if you just made a different arc for each of your data sets with a variety of radii, you would have additional rings in your chart.
因此，如果您只是为具有各种半径的每个数据集制作不同的弧线，您的图表中就会有额外的环。
