向径向 D3 图表添加多个组

Question

抱歉，如果标题具有误导性。 基本上我有以下 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。 更广泛的群体。 所以我可以单独设置它们的样式所以，例如，对于“John”：

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

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

Answer 1

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

• 我们需要再次使用相同的 new_data 向 SVG 添加一个新的 g
• 为名称（“John”、“Spencer”等）而不是键（“red”、“green”、“blue”）创建一个新的 arc object
• 半径是 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/

结果：