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）