向径向 D3 图表添加多个组答案

【问题标题】：Adding multiple groups to radial D3 chart向径向 D3 图表添加多个组
【发布时间】：2022-01-06 20:38:44
【问题描述】：

抱歉，如果标题具有误导性。基本上我有以下 d3 图表：

它基于一个由 5 个元素组成的数组，每个元素包含 3 个单独的值。如您所见，径向图分为 5 个部分（有一个间隙），然后每个部分包含 3 个单独的值作为条形图。

这是一个 js 小提琴：https://jsfiddle.net/kpu5o7v2/ 还有我的数据：

[
        {
            index: 0,
            name: "John",
            red: 35,
            green: 16,
            blue: 56
        },
        {
            index: 1,
            name: "Spencer",
            red: 12,
            green: 34,
            blue: 8
        },
        {
            index: 2,
            name: "Alice",
            red: 6,
            green: 6,
            blue: 70
        },
        {
            index: 3,
            name: "Cat",
            red: 12,
            green: 80,
            blue: 1
        },
        {
            index: 4,
            name: "Dave",
            red: 80,
            green: 1,
            blue: 2
        }
    ]

我想知道的是，我怎样才能添加与 new_data.name 值对应的部分？ IE。更广泛的群体。所以我可以单独设计它们因此，例如，对于“约翰”：

起始角度为0
端角与约翰的蓝色部分相同
半径是某个数字 > 最大的小节。

下面是一个例子（如果你要给这个组一个中风）：

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我想出了这个问题的答案：

我们需要再次使用相同的 new_data 向 SVG 添加一个新 g
为名称（“John”、“Spencer”等）而不是键（“red”、“green”、“blue”）创建一个新的 arc 对象
半径为 y(ymax)，其中 ymax 是所有数据中的最大值
起始角度只是 x0(name)（范围为 0 到 2PI）
结束角度与上面相同+宽度。这是周长/名字的数量。


  let arc2 = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius((d) => {
      return y(ymax);
    })
    .startAngle(d => {
      return x0(d.name)
    })
    .endAngle(d => {
      //let circumference = 2* Math.PI;
      //let bandwidth = circumference/names.length;
      let endAngle = x0(d.name) + (x0.bandwidth() * 0.8);
      return endAngle;
    })
    .padAngle(0.01)
    .padRadius(innerRadius);

  svg.append("g")
    .selectAll("path")
    .data(new_data)
    .enter()
    .append("path")
    .attr('fill', d => {
      return "none";
    })
    .attr("stroke", "#333")
    .attr("stroke-width", 2)
    .attr("d", arc2);

新的 JS 小提琴：https://jsfiddle.net/kpu5o7v2/1/

结果：

【讨论】：