如何将数据添加到数据在父对象的父对象中的 selectAll 占位符？答案

【问题标题】：How to add data to selectAll placeholder whose data is in a parent's parent object?如何将数据添加到数据在父对象的父对象中的 selectAll 占位符？
【发布时间】：2012-10-02 22:21:38
【问题描述】：

最初，我有一个来自 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 ms @ 100 QPS”）

问题是：

我应该如何将数据绑定到

占位符？由于有数据，但当我将它们附加到

时没有，而在下。

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__（听起来也很老套！）

你能给点建议吗？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

如果您查看API 中的@987654321@，它会显示：

每个新元素都继承当前元素的数据

换句话说，<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 */ });

【讨论】：