创build链接到csv文件的表格

我正在尝试使用d3创build一个链接到*.csv文件的表格,但是我得到的只是一个空白的网页。 即使克里米亚的例子,我得到一个空白页面。
我将不胜感激,指导或展示一个我正在做的错误的实例或build议。

如果您要求从CSV数据创build一个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; }); }); 

看看这个工作的例子 。 如果您要复制代码,则需要更新tabulate()函数,以便select现有的表格或不同的容器(而不是"#container" ),然后可以像这样使用CSV数据:

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

@Shawn_allen提出的答案有一个错误。

要解决它,只需更改以下代码行

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

通过这一个

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

请享用 !

通常,我需要定期刷新数据表。 以下是我如何使用数据填充表格:

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在答案中所示),因为我不需要这些。 所以代码更简单。

小提琴

对不起,添加这个作为一个新的答案,但我没有足够的观点添加它作为评论。 稍微调整一下@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; }); 

});

没有必要创build与列,值的JSON。