d3朝阳，没有严格的亲子关系

Question

我想在d3.js中创建朝阳，其中某些节点未遵循严格的父子关系。

下面的示例图可以最好地说明我的节点遵循的关系。

具体而言，围绕根节点的第一个圆圈定义了一些类别（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()方法之下，可能是在d.arcs数组中的每个元素上运行了某种循环？ 我欢迎任何建议。

谢谢！

Answer 1

总之，我发现带有多个环的甜甜圈图比朝阳型更适合我要尝试的工作。