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

jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

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

d3.js JavaScript

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

HTML Tableノードの構造

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

元になるデータ

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

var datalist = [{category:"分析方法",analysis1:"方法1",analysis2:"方法2"},
{category:"基準1",analysis1:"A",analysis2:"B"},
{category:"基準2",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;});

ここまでをまとめると以下のようになります。(CSSでtableとtdのstyleが設定されています。)



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