D3.jsを利用したテーブルの作成

集計したデータを表にする場合、Tableノードのtr,th,tdノードに数値を埋めていく必要があります。
これを自動化するためD3.jsを利用してみましょう。

HTML Tableノードの構造

一番外にくるのがtableノードで、その内側にtrノードが来ます。trノードは一行に相当します。さらに各セルに相当するものとしてtdノードがあります。また、表の見出しもtrノード内に記述します。この場合は、tdノードではなくthノードにします。こうして見出しとデータセルを別のノードで扱っておくと、それぞれに異なるstyleをCSSで設定できるので便利です。

元になるデータ

見出しと2行分のデータを作成します。連想配列を多次元配列に埋め込む形式にしてみます。（JSONに近い形式です）

var datalist = [{category:"分析方法",analysis1:"方法１",analysis2:"方法２"},
{category:"基準１",analysis1:"A",analysis2:"B"},
{category:"基準２",analysis1:"C",analysis2:"D"];

theadとtbodyノードの利用

D3.jsでtableを作成する場合、見出しとデータ領域の両方でtrタグが使われているのが少し厄介です。selectAll("tr")でtable内のすべてのtrノードが該当してしまうからです。今回は、theadとtbodyノードをtableの直下に作ることで、見出しとデータ領域のtrノードを別々に呼び出すことにします。

var table = d3.select("#tablediv").append(table);
var thead = table.append("thead");
var tbody = table.appen("tbody");

見出しの作成

配列の1番目に見出しがあるので、これを見出しのthノードに移した後、shift()を使ってdatatableから見出しを削除します。

var tr_th = thead.append("tr");
var th = tr_th.selectAll("tr").data(d3.values(datalist.shift())).enter()
.append("th").text(function(d){return d;});

データ領域の作成

既にdatalistにはデータ領域の数値のみなので、これをtdノードに移していきます。

var tr_td = tbody.selectAll("tr").data(datalist).enter().append("tr");
var td = tr_td.selectAll("td").data(function(d){return d3.values(d);}).
enter().append("td").text(function(d){return d;});

ここまでをまとめると以下のようになります。（ＣＳＳでtableとtdのstyleが設定されています。）

D3.jsを利用することで、行数や見出しの数を可変にできるのでとても便利です。