D3.js - 多环圆环图 [英] D3.js - Donut charts with multiple rings

问题描述

下面的例子展示了 D3.js 中的一个圆环图，是否可以在图表中添加一个以上的圆环?

The following example shows a donut chart in D3.js, is it possible to add more than one ring to the chart?

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

示例: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],
};

我想要的是在同一个中心点周围总共有 5 个环，这可能吗?有人有例子吗?

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?

推荐答案

是的，您可以很容易地做到这一点.关键是使用嵌套选择.也就是说，您传入列表的顶级列表并为每个列表创建一个容器元素.然后进行嵌套选择并绘制实际元素.在这种特殊情况下，您还需要调整圆弧的半径，使它们不重叠.

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

更新了 jsfiddle 此处.

Updated jsfiddle here.

这篇关于D3.js - 多环圆环图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！