D3.js - 多环圆环图

IT技术 javascript d3.js
2021-02-26 11:28:20

以下示例显示了 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 个环，这可能吗，有人有例子吗？

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

在这里更新了 jsfiddle 。

以与其他属性相同的方式，例如.attr("class", function(d) { return "class" + d; })。
2021-04-20 11:28:20
@PrincessBelle这里是一个与版本 4 类似的图表。
2021-04-29 11:28:20
如何根据创建的每个路径的数据集指定一个类？我希望能够用 css 设计戒指的样式？
2021-05-03 11:28:20
@LarsKotthoff 谢谢，是的，我已经看到了，并尝试在jsfiddle.net/minnie_mouse/758s1upm 中做同样的事情。但它不起作用，我不确定我做错了什么:(
2021-05-03 11:28:20
@LarsKotthoff 我在 v3 中有这个径向图：jsfiddle.net/minnie_mouse/033jrrz8 我已经尝试在 v4 中实现它：jsfiddle.net/minnie_mouse/758s1upm 我已经将方法名称更改为 v4 等效并修复了所有其他我知道 v3 和 v4 之间的差异。但它仍然给出错误，我不知道我还需要修复什么。你有什么想法？我将衷心感谢您的帮助！非常感谢！
2021-05-11 11:28:20

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

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

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

如何即时附加多个环......我的意思是如果我们点击第一个环然后第二个环将被附加......我需要这个因为弧中的单个区域的子菜单要求......请帮助我我深深地陷入其中。
2021-04-21 11:28:20
其它你可能感兴趣的问题
上一篇如何衡量Promise的执行时间？ 下一篇jqGrid ColumnChooser 是否有完整的工作示例？