Skip to content

Instantly share code, notes, and snippets.

@dogrunjp
Last active April 1, 2017 02:58
Show Gist options
  • Save dogrunjp/239bf52da9fccf521840a6eeb08f842b to your computer and use it in GitHub Desktop.
Save dogrunjp/239bf52da9fccf521840a6eeb08f842b to your computer and use it in GitHub Desktop.
D3.jsでtableを描画する方法。JSONのデータを流し込むだけなら、D3.jsでテーブルを生成することは考えることは特にないのだけど、カラムの項目を並べ替えたりした場合やや悩むなと思っていた所、シンプルすぎるD3.jsのテーブルのカラムの順番を調整する方法が紹介されていたのでメモ。

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment