1

d3 で 2 つの 1 次元配列からテーブルを作成したいと考えています。

入力配列が次のとおりであると仮定しましょう。

array1 = ['a','b','c'];
array2 = ['d','e','f'];

テーブルはこんな感じにしたい

ad  ae  af
bd  be  bf
cd  ce  cf

ネストされた選択を使用する必要がありますか? または、 を 1 回呼び出してから を呼び出す必要selectAll().data()がありeach()ますか? （実際には、各行列セルの操作は ほど単純では'a'+'d'ありませんが、これは答えには関係ないと思います。）

4

1 に答える 1

4

1 つの方法は、2 つの配列から新しい 2D 配列を作成して、標準のネストされた選択パターンに適したものにすることです ( http://bost.ocks.org/mike/nest/を参照)。

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

// prepare a 2D array
var data = arr1.map(function(v1) {
      return arr2.map(function(v2) {
        return v1 + v2;
      })
    });

d3.select("body").append("table")
  .selectAll("tr")
    .data(data)
  .enter().append("tr")
  .selectAll("td")
    .data(Object)
  .enter().append("td")
    .text(String);

別のアプローチは、関数がグループ内の要素のインデックス i だけでなく、それが属するグループのインデックス j も渡されるという事実を利用することです。

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    // bound data is not used in the td cells; only arr1.length is used
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d, i, j) { return arr1[j] + d; }); // d === arr2[i]

同様のアプローチでは、インデックス j の代わりに parentNode を使用して、グループからバインドされたデータを取得します。

var arr1 = ['a', 'b', 'c'],
    arr2 = ['d', 'e', 'f'];

d3.select("body").append("table")
  .selectAll("tr")
    // arr1 corresponds to the rows
    .data(arr1)
  .enter().append("tr")
  .selectAll("td")
    // arr2 corresponds to the columns
    .data(arr2)
  .enter().append("td")
    .text(function(d) { return d3.select(this.parentNode).datum() + d; });
于 2013-02-07T05:33:47.783 に答える