D3.jsでtableを描画する方法。JSONのデータを流し込むだけなら、D3.jsでテーブルを生成することは考えることは特にないのだけど、カラムの項目を並べ替えたりした場合やや悩むなと思っていた所、シンプルすぎるD3.jsのテーブルのカラムの順番を調整する方法が紹介されていたのでメモ。

making_table_in_D3js.md

最も簡単な方法（だけどカラムの順番は調整できない）

d3.select("table.glist tbody").selectAll("tr").data(g_infs)
    .enter().append("tr")
    .selectAll("td").data(function(r){return d3.values(r)})
    .enter().append("td")
    .text(function(d){return d});

一つのセルごと値を書き込む方法

var tbl = d3.select("table.glist tbody").selectAll("tr").data(g_infs)
            .enter().append("tr");
            
var tbl = d3.select("table.glist tbody").selectAll("tr").data(g_infs)
            .enter().append("tr");

tbl.append("td").text(function(r){return r.name});
tbl.append("td").text(function(r){return r.symbol});
tbl.append("td").text(function(r){return r.gid});

参考

Making HTML tables in D3 doesn’t need to be a pain