创建链接到csv文件的表

我正在尝试使用d3创建链接到*.csv文件的表，但我得到的只是一个空白网页。即使有克里米亚的例子，我也会得到一个空白页面。
我将不胜感激被指示或显示一个工作示例或我做错的建议。创建链接到csv文件的表

2012-02-13 adam.888

请给我们展示一些复制问题的代码。 – Dogbert 2012-02-14 15:45:18

另请参阅D3文档中为selection.data（）提供的示例：https：//github.com/mbostock/d3/wiki/Selections#data – DGrady 2013-08-06 21:55:11

如果你问有关创建从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"），然后可以使用CSV数据，如下所示：

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

来源

2012-02-29 22:32:48

非常有趣。非常感谢您的帮助。 – 2012-03-08 18:21:56

很好的答案 - 谢谢！ – 2012-08-20 17:50:10

这个例子目前无效，td元素为空。你能看到这个问题http：// stackoverflow。com/questions/23399462/d3-table-example-yield-empty-td-tags – 2014-04-30 23:25:53

@Shawn_allen提出的答案中存在一个错误。

为了解决它只是通过这一个

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

享受改变的代码

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

以下行！

来源

2014-10-02 02:12:01

通常，我需要定期刷新数据表。下面是我如何填充一个表数据：

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

来源

2015-03-03 18:48:37

我很抱歉在添加为新的答案，但我没有足够的积分，将它添加注释。稍微调整一下@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; });

}）;

没有必要创建该列，值的JSON。

来源

2015-05-22 05:24:22 Ben

创建链接到csv文件的表

回答

相关问题