如何將數據添加到selectAll佔位符，其數據位於父對象的父對象中？

Question

起初我從具有以下字段的CSV平坦的哈希結構：

zoneId,op,metricName,value 

然後我窩它由

d3.nest() 
    .key(function(d){return d.zoneId}) 
    .key(function(d){return d.op}) 
    .entries(data) 

現在有一個看起來像

zoneId -> op -> <details> 

層次

這裏是一個數據的例子

nestedData = { 
[{ 
    "key": "zone1", 
    "values": [{ 
    "key": "Get", 
    "values": [{ 
     "zoneId":"zone1" 
     "op":"Get" 
     "metricName":"CompletionTime", 
     "value":"10ms" 
    }, { 
     "zoneId":"zone1" 
     "op":"Get" 
     "metricName":"Throughput", 
     "value":"100 query/s" 
    }] 
    },{ 
    /* Similar to the "values" of last bracket */ 
    }] 
    }] 
}, { 
    "key": "zone2", 
    "values": [ 
    /* Similar to the "values" of last bracket */ 
    ] 
    }] 
}] 
} 

現在我想從這個嵌套數據結構中建立一個表。

• 每個區佔據一個表
• 每個運算是行
• 在每一行中
  • 左欄是運算名稱
  • 右列是指標（如的格式化版本： 「10毫秒@ 100 QPS」）

問題是：

如何將數據綁定到<tr>佔位符？由於<表>有數據，但<TBODY>不，當我把它們添加到<表>，而<TR>正在<TBODY>。

var tables = d3.select('#perfs .metrics') 
      .selectAll('table') 
      .data(nestedData) 
      .enter().append('table'); 
/* added tbody and data */ 
tables.append('tbody') 
     .selectAll('tr') 
     .data(???).enter() 
     .append('tr') 
     .selectAll('td') 
     .data(function(d){return [d.key,d.value];}) // left and right column 
     .enter().append('td') 
     .text(function(d){ /* iterate through the metrics and format them */ }) 

這裏有兩個解決方案，我能想到的：（！但聽起來哈克）

• 分配數據TBODY
• 訪問this.parentNode .__ data__
（聽起來也哈克！）

你可以給點建議嗎？

Answer 1

如果您在API看selection.append()，有這麼一句話：

每個新元素繼承當前元素

換句話說，<tbody>默認的數據將具有相同的數據這是綁定到<table>。所以，你的代碼是：

var metrics = d3.select('#perfs .metrics'); 
var tables = metrics.selectAll('table').data(nestedData); 
tables.enter().append('table'); 

var tbody = tables.append('tbody'); 
var rows = tbody.selectAll("tr").data(function(d) { return d.values; }); 
rows.enter().append("tr"); 
var cells = rows.selectAll("td").data(function(d) { return d.values; }); 
cells.enter().append("td") 
    .text(function(d){ /* iterate through the metrics and format them */ });