D3.js 表(table)の作り方 – サンプル
D3.jsの使い方の説明です。テーブルの作り方を紹介します。
配列の場合
表示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Table</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> var dataset = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12], ]; d3.select("body") .append("table") .attr("border", "1") // 枠線表示 .append("tbody") .selectAll("tr") .data(dataset) .enter() .append("tr") .selectAll("td") .data(function(row) { return row; }) .enter() .append("td") .text(function(d) { return d; }); </script> </body> </html> |
29行目のrowは、25行目で設定した二次元配列(dataset)のデータが一行ずつ呼び出されます。(例:[1, 2, 3])。呼び出された配列内の変数をtdに格納して表示するとテーブルの全セルにデータが割り当てられます。
オブジェクトの場合
表示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Table</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> var dataset = [ { "name": "A", "para1": 0, "para2": 5 }, { "name": "B", "para1": 1, "para2": 6 }, { "name": "C", "para1": 2, "para2": 7 }, { "name": "D", "para1": 3, "para2": 8 }, { "name": "E", "para1": 4, "para2": 9 } ] var names = d3.keys(dataset[0]); var table = d3.select("body") .append("table") .attr("border", "1") // 枠線表示; table.append("thead") .append("tr") .selectAll("th") .data(names) .enter() .append("th") .text(function(d) { return d; }); table.append("tbody") .selectAll("tr") .data(dataset) .enter() .append("tr") .selectAll("td") .data(function(row) { return d3.entries(row); }) .enter() .append("td") .text(function(d) { return d.value; }); </script> </body> </html> |
20行目のd3.keys()は、オブジェクトのキーを配列として取り出す関数です。
|
1 2 3 |
d3.keys({ "name": "A", "para1": 0, "para2": 5 }) -> ["name", "para1", "para2"] |
テーブルのヘッダーを作るため、datasetの先頭行の文字列を抽出しています。
また、40行目のd3.entries()は、オブジェクトのキーと値を配列として取り出す関数です。
|
1 2 3 4 5 |
d3.entries({ "name": "A", "para1": 0, "para2": 5 }) -> [{"key" : "name", "value" : "A"}, {"key" : "para1", "value" : 0}, {"key" : "para2", "value" : 5}] |
40行目でオブジェクトを配列としてdataにセットすると、43行目のdにオブジェクトがひとつづつ格納されて返ります。(例：{“key” : “name”, “value” : “A”})。tableのセルにはオブジェクトの値を格納したいので、d.valueで値を参照します。