3

私の投稿は、どういうわけかこの質問へのフォローアップです: D3 - JSON データ構造を扱う方法は?

要するに、ネストされた複雑な JSON 構造の処理に問題があります。説明するために、簡単なサンプル (上記のリンクを反映したもの) を示しましょう。

var regularData = [[40,20,30,24,18,40],
                    [24,20,30,41,12,34]];

var myTable = d3.select("body").append("table")
  .selectAll("tr")
  .data(regularData, function(d) {
    return d;
  })
  .enter()
  .append("tr")
  .selectAll("td")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("td") 
  .text(function(d) {
    return d;
  });

D3 のドキュメントで既に示されているように、これは予想どおり 2 行の数値を生成します。

しかし、regularData を次のように置き換えると:

var newData = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

myTable の構築行 3 から 5 を次のように調整します。

  .data(newData, function(d) {
    return d.scores;
  })

各ユーザーのスコアをループすることを期待していました。代わりに、2 番目のデータ句は引き続き最上位オブジェクトにバインドされます (つまり、プロパティ "user" および "scores" を使用)。

力ずくのアプローチは、それぞれの目的に適合した単純な「配列の配列」にデータをキャストすることです。しかし、おそらく私は何かを逃したので、もっとエレガントな方法が可能ですか?

Pさん、ご協力ありがとうございました。

4

1 に答える 1

3

の2 番目の引数d3.dataの意味を少し誤解しています。

この引数は、d3 API の他のほとんどの関数のように、アクセサ関数としてではなく、データのIDを提供することによってオブジェクトの不変性のために使用されます。

ただし、関数が最初の引数として渡されると、次のようになります。

.data(function(d) {
  return d;
})

その後、アクセサ関数として動作します。

あなたの場合、あなたが望むのは次のようなものです：

var newData = [{"user":"jim","scores":[40,20,30,24,18,40]},
            {"user":"ray","scores":[24,20,30,41,12,34]}];

var myTable = d3.select("body").append("table")
  .selectAll("tr")
  .data(regularData, function(d) {
    return d.user;
  })
  .enter()
  .append("tr")
  .selectAll("td")
  .data(function(d) {
    return d.scores;
  })
  .enter()
  .append("td") 
  .text(function(d) {
    return d;
  });

userフィールドをデータの として使用し、2 番目の呼び出しで をid返して要素を作成しました。scoresdatatd

于 2013-11-11T14:39:15.643 に答える