Question

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

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

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

我怎样才能在d3中表现出来？以下是我的一些潜在想法，我很乐意就哪一个最有意义提出建议。

构建没有分区布局（或其他布局）的旭日情节，因为我的数据不遵循严格的父子关系。这可能吗？我对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数组？我欢迎任何建议。

谢谢！

Answer 1

总之，我发现donut chart with multiple rings更适合我试图做的事情而不是森伯斯特。

d3 sunburst没有严格的亲子关系

1 个答案: