読者です 読者をやめる 読者になる 読者になる

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

d3.jsで2次元配列からテーブルを作成する

2次元配列を使って。

http://www.openspc2.org/reibun/D3.js/code/table/0004/index.html http://bl.ocks.org/biovisualize/1226718

成果物

GitHub

Playgrounds

See the Pen d3.entries.201702200818 by ytyaru (@ytyaru) on CodePen.

jsfiddle, jsdo.it

開発環境

前回まで

Server Error
Server Error

d3.jsのデータ駆動、セレクタなどに触れてリストを作成した。

今回

2次元配列でテーブルを作成する。

要点

data()を2回使ってネストした2次元配列を展開する。

コード

datas = [[0, "山田"],[1, "鈴木"],[2, "高橋"]];   // データ定義する
d3.select("#NameList").select("tbody")          // 差し込み先要素を選択する
.selectAll("tr")                                // データの行分だけ`tr`を追加する
  .data(datas)                                  //   ↓
  .enter()                                      //   ↓
  .append("tr")                                 //   ↓
.selectAll("td")                                // データの列分だけ`td`を追加する
  .data(function(row){return row;})             //   ↓
  .enter()                                      //   ↓
  .append("td")                                 //   ↓
  .text(function(col){return col;});            //   ↓

data()を2回使っている。

  1. .data(datas)で2次元配列を展開し[...],[...],[...]とする
  2. .data(function(row){return row;})で1で得た1つあたりの[...]を展開し[num, "name"]とする

翻訳

コードのインデントをみれば何となく構造がわかると思う。大きく分けるとtr(行)とtd(列)の2つになる。コードを1行ずつ日本語で理解してみる。

.selectAll("tr")

問い 答え 翻訳
どこに差し込むか d3.select("#NameList").select("tbody") id属性値がNameListの要素中にあるtbody要素に。
対象DOM要素はどれか .selectAll("tr") 上記内の全tr要素
対象配列データは何か .data(datas) [[...],[...],[...]]配列(3つの要素)
いつ行うか .enter() 差し込む要素よりデータのほうが多い時に、多い分のデータだけ。
何を差し込むか .append("tr") tr要素を追加する

.selectAll("td")

問い 答え 翻訳
どこに差し込むか 〜.append("tr") 〜のように作成されたtr要素に。
対象DOM要素はどれか .selectAll("td") 上記内の全td要素
対象配列データは何か .data(function(row){return row;}) 子配列[...]をそれぞれ0, "山田"のように展開した配列データ
いつ行うか .enter() 差し込む要素よりデータのほうが多い時に、多い分のデータだけ。
何を差し込むか .append("td") td要素を追加する
差し込む要素のどこをどうするか .text(function(col){return col;}); テキストノード値に0, 山田など展開された値を設定する

所感

コードはあっさりしているが、かなり苦労した。d3.jsのメソッドチェーンは難しい。練習あるのみか。