11

以下示例显示了 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);

示例：http: //jsfiddle.net/gregfedorov/Qh9X5/9/

因此，在我的数据集中，我想要以下内容：

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 个环，这可能吗？有人举个例子吗？

4

2 回答 2

17

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

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 。

于 2013-07-06T22:48:42.723 回答
2

使用您发布的小提琴，这里的小提琴中定义了一个“弧”：

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

该弧是用于在此处构建环形图的：

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

因此，如果您只是为具有各种半径的每个数据集制作不同的弧线，您的图表中就会有额外的圆环。

于 2013-07-06T22:50:35.593 回答