d3 sunburst 没有严格的亲子关系

Question

我想在 d3.js 中创建一个 sunburst，其中一些节点不遵循严格的父子关系。

下面的示例图最好地解释了我的节点遵循的关系。

具体来说，围绕根节点的第一个圆圈定义了一些类别（A、B、C 或 D），并且所有后续圆圈中的每个节点将严格归入这些大类中的一个。也就是说，没有节点会穿过我绘制的灰色铅笔线。但是，在随后的每个同心圆上，节点将不再严格地落入其父节点中。例如，请注意，值为 0.3 的绿色节点虽然严格来说始终是类别 A 的子节点，但严格来说不是紫色节点或红色节点的子节点：它跨越了边界。

如何在 d3 中表示这一点？以下是我的一些潜在想法，我希望就哪一个最有意义提出建议。

1. 构建没有分区布局（或其他布局）的旭日图，因为我的数据不遵循严格的父子关系。这可能吗？我对 d3 的了解有限，所以我非常依赖在线教程，到目前为止，我看到的每个旭日形图都使用分区布局。
2. 使用分区布局，并一次又一次地假设每个同心圆仅由相同的四个节点（类别 A、B、C 和 D）组成。但是，在绘制外圆弧时，每个节点绘制多条圆弧。例如，在绘制圆 2 时，紫色和红色弧线是同一节点内的两条不同的弧线。绘制圆 3 时，紫色、绿色和红色的弧线是同一节点内的三个不同的弧线。

选项 2 似乎很容易实现，所以我试了一下，并在每个节点的数据点中添加了一个额外的数组，指定如何分解节点。所以我的绘图（省略 B、C 和 D）将用以下数据表示：

{
  "name": "A1",
  "arcs": [1],
  "value": 1,
  "children": [
    {
      "name": "A2",
      "arcs": [0.4, 0.6],
      "value": 1,
      "children": [
        {
          "name": "A3",
          "arcs": [0.3, 0.3, 0.4],
          "value": 1,
          "children": [
            {
              "name": "A4",
              "arcs": [0.2, 0.4, 0.2, 0.2],
              "value": 1,
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

但是，我正在努力弄清楚如何为每个节点绘制多条弧线。我目前有以下代码，它为每个节点绘制一个弧，我不知道如何修改它以绘制多个弧，一个用于d.arcs 数组中的每个元素：

var arcGenerator = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

var path = sunburst_plot.datum(data_root).selectAll("path")
  .data(partitionLayout.nodes)
.enter()
  .append("path")
  .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
  .attr("d", arcGenerator)
  .style("stroke", "#fff")
  .style("fill", "#000")
  .style("fill-rule", "evenodd")

是否有人对如何继续提出建议，可能是通过重新考虑我的数据结构而不使用分区布局，或者以某种方式，在 d3 的 enter() 方法之下，可能对 @987654327 中的每个元素运行某种循环@ 大批？我欢迎任何建议。

谢谢！

Answer 1

总之，我发现 donut chart with multiple rings 比 sunburst 更适合我想要做的事情。