2

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

问题是：

我应该如何将数据绑定到 <tr> 占位符？由于 <table> 有数据，但当我将它们附加到 <table> 时 <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（但听起来很 hacky！）
  • 访问 this.parentNode.__data__ （听起来也很老套！）

你能给点建议吗？

4

1 回答 1

2

如果您查看APIselection.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 */ });
于 2012-10-02T23:29:04.843 回答