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），但如何应对次迭代e设备的孩子？

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）