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 ms @ 100 QPS”）

问题是：

我应该如何将数据绑定到＆lt; tr＆gt;占位符？由于＆lt; table＆gt;有数据，但＆lt; tbody＆gt;当我将它们附加到＆lt; table＆gt;时，并不是＆lt; tr＆gt;属于＆lt; tbody＆gt;。

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

如果您查看selection.append()中的API，则会显示：

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

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

如何将数据添加到selectAll占位符，其数据位于父对象的父对象中？

1 个答案: