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

2次元配列を使って。

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

成果物

Playgrounds

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

jsfiddle, jsdo.it

開発環境

• Linux Mint 17.3 MATE
• Firefox 42.0
• d3.js v4.5.0

前回まで

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のメソッドチェーンは難しい。練習あるのみか。