javascript - d3 迭代嵌套数据

Question

我有 json 数据，其结构如下:

var data = {
  "from": 1457823600000,
  "to": 1458687600000,
  "equipments": [
    {
      "name": "Equipment1",
      "actions": [
        {
          "name": "action1",
          "start": 1458035704183,
          "end": 1458122104234,
          "color": "green"
        },
        {
          "name": "action2",
          "start": 1458035704268,
          "end": 1458294904268,
          "color": "red"
        }
      ]
    },
    {
      "name": "Equipment2",
      "actions": [
        {
          "name": "action3",
          "start": 1458208504268,
          "end": 1458381304268,
          "color": "blue"
        },
        {
          "name": "action4",
          "start": 1458122104268,
          "end": 1458467704268,
          "color": "yellow"
        }
      ]
    }
  ]
}

在 d3 y 轴上，它应该如下所示:

Equipment 1    |
    action1    |
    action2    |
               |
Equipment 2    |
    action3    |
    action4    |
               |
               -----------------------------

现在我的 d3 看起来像这样

var equipments = svg.selectAll("equipments")
                .data(data.equipments)
                .enter()
                .append("text")
                  .attr("x", ...)
                  .attr("y", ...)
                  .text(name);

我可以迭代 2 个设备(Equipment1 和 Equipment2)，但是如何处理这些设备的子设备？

Answer 1

我猜这可以这样解决:

var svg = d3.select('svg');
var equipments = svg.selectAll("equipments")
                .data(data.equipments)
                .enter()
                .append("g");

equipments.append("text")
                .text(function(d){return d.name});

equipments.append("g").selectAll("actions")
                .data(function(d) { return d.actions })
            .enter()
            .append("text")
            .text(function(d) { return d.name});

输出没有位置(x 或 y)，因此它是堆叠的，但如果您检查该元素，您会看到所需的结构:

<svg>
    <g>
        <text>Equipment1</text>
        <g>
            <text>action1</text>
            <text>action2</text>
        </g>
    </g>
    <g>
        <text>Equipment2</text>
        <g>
            <text>action3</text>
            <text>action4</text>
        </g>
    </g>
</svg>

我喜欢使用<g>这在实践中通常非常有用，即使在您的情况下，这不是强制性的。 (参见我的jsfiddle)