d3 sunburst没有严格的亲子关系

Question

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

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

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

我如何在d3中表示这一点？以下是我的一些潜在想法，我很乐意为哪一个最有意义。

在没有分区布局（或其他布局）的情况下构建sunburst图，因为我的数据不遵循严格的父子关系。这可能吗？我对d3的了解是有限的，所以我一直非常依赖于在线教程，到目前为止，我见过的每个旭日形图都使用了分区布局。
使用分区布局，并假设每个同心圆一次又包含相同的四个节点（类别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()方法下，可能在d.arcs数组中的每个元素上运行某种循环？我欢迎任何建议。

谢谢！