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 */
    ]
  }]
}]
}

次に、このネストデータ構造からテーブルを作成します。

  • 各ゾーンはテーブルを占有します
  • 各操作は行です
  • 各行で
    • 左の列はop名です
    • 右の列は、メトリックのフォーマットされたバージョンです（「10ms @ 100QPS」など）。

問題は：

データを<tr>プレースホルダーにバインドするにはどうすればよいですか？<table>にはデータがありますが、<tr>が<tbody>の下にあるときに、それらを<table>に追加すると、<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 */ })

これが私が考えることができる2つの解決策です：

  • tbodyにデータを割り当てます（ただし、ハッキーに聞こえます！）
  • this.parentNode .__ data __にアクセスします（これもハッキーに聞こえます！）

何かアドバイスはありますか？

4

1 に答える 1

2

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 */ });
于 2012-10-02T23:29:04.843 に答える