我正在尝试*.csv
使用 d3创建一个链接到文件的表,但我得到的只是一个空白网页。即使以克里米亚为例,我也会得到一个空白页。
如果能得到指导或展示一个工作示例或建议我做错了什么,我将不胜感激。
创建链接到 csv 文件的表
IT技术
javascript
d3.js
html-table
2021-02-15 09:56:37
4个回答
如果您要从 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; });
});
查看工作示例。如果您要复制该代码,则需要更新该tabulate()
函数,以便它选择现有表或不同的容器(而不是"#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; });
});
无需使用列值创建该 JSON。
其它你可能感兴趣的问题