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）

d3迭代嵌套数据

1 个答案: