csvファイルにリンクされたテーブルを作成する

Question

*.csvファイルにリンクされたテーブルをd3を使用して作成しようとしていますが、空白のWebページしかありません。 クリミアの例でも空白のページが表示されます。
私が間違ってやっていることの実例や示唆を指示したり、示したりすることに感謝します。

Answer 1

あなたはCSVデータからHTMLテーブルを作成する方法について求めているならば、これはあなたが望むものである：

d3.csv("data.csv", function(data) { 
    // the columns you'd like to display 
    var columns = ["name", "age"]; 

    var table = d3.select("#container").append("table"), 
     thead = table.append("thead"), 
     tbody = table.append("tbody"); 

    // append the header row 
    thead.append("tr") 
     .selectAll("th") 
     .data(columns) 
     .enter() 
     .append("th") 
      .text(function(column) { return column; }); 

    // create a row for each object in the data 
    var rows = tbody.selectAll("tr") 
     .data(data) 
     .enter() 
     .append("tr"); 

    // create a cell in each row for each column 
    var cells = rows.selectAll("td") 
     .data(function(row) { 
      return columns.map(function(column) { 
       return {column: column, value: row[column]}; 
      }); 
     }) 
     .enter() 
     .append("td") 
      .text(function(d) { return d.value; }); 
}); 

はworking exampleをチェックしてください。そのコードをコピーする場合は、tabulate()関数を更新して、既存のテーブルまたは別のコンテナ（"#container"ではなく）を選択する必要があります。

d3.csv("path/to/data.csv", function(data) { 
    tabulate(data, ["name", "age"]); 
}); 

Answer 2

@Shawn_allenが提案した回答にバグがあります。ただ楽しんで、この1

return {column: column, value: row[columns.indexOf(column)]}; 

によってコード

return {column: column, value: row[column]}; 

の次の行を変更し、それを解決するために

！

Answer 3

多くの場合、定期的にデータテーブルを更新する必要があります。ここで私はデータを持つテーブルを移入方法は次のとおりです。

HTML：

<table id="t1"> 
    <thead> 
     <tr><th>Name<th>Age 
    </thead> 
</table> 

はJavaScript：

function tabulate(data, columns) { 
    var table = d3.select("#t1"); 
    table.select('tbody').remove(); // remove any existing data 
    var tbody = table.append('tbody'); 
    data.forEach(function(row) { 
    var tr = tbody.append('tr'); 
    columns.forEach(function(column) { 
     tr.append('td').text(row[column]); 
    }); 
    }); 
    return table; 
} 

注：

• 私はむしろ、HTMLでテーブルヘッダを置くのが好きJavaScriptからそれらを生成するよりも。
• 私はテーブルの行とセルにデータを添付しませんでした（@Shawnはその答えに表示されます）。なぜなら、その必要はないからです。だからコードは簡単です。

fiddle

Answer 4

私は、新しい答えとしてこれを追加することで申し訳ないが、私はコメントとしてそれを追加するための十分なポイントを持っていません。 @Shawn_Allenのコードの終わりまでちょっと微調整。私はこれも動作すると信じています。

//create a cell in each row for each column 
var cells = rows.selectAll("td") 
    .data(function(row) { 
     return columns.map(function(column) { 
      return row[column]; 
     }); 
    }) 
    .enter() 
    .append("td") 
     .text(function(d) { return d; }); 

}）;

column、valueを使用してJSONを作成する必要はありませんでした。