LoginSignup
18
17

More than 5 years have passed since last update.

D3.js を使ってcsvからテーブルを出力する

Posted at
var table = d3.select('body').append('table'); //tableタグ追加
var thead = table.append('thead'); //theadタグ追加
var tbody = table.append('tbody'); //tbodyタグ追加

//csv読み込み
d3.csv('hoge.csv', function(csv){
    var headerKyes = d3.map(csv[0]).keys(); //ヘッダー用にkeyを取得

    thead.append('tr')    //trタグ追加
        .selectAll('th') 
        .data(headerKyes) 
        .enter()
        .append('th')    //thタグ追加
        .text(function(key){return key});

    tbody.selectAll('tr')
        .data(csv)
        .enter()
        .append('tr')    //trタグ追加
            .selectAll('td')
            .data(function (row) { 
                      return d3.entries(row); //rowオブジェクトを配列へ変換
            }) 
            .enter()
            .append('td')    //tdタグ追加   
            .text(function(d){ return d.value })

})

example

18
17
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
17