创建链接到 csv 文件的表

IT技术 javascript d3.js html-table
2021-02-15 09:56:37

我正在尝试*.csv使用 d3创建一个链接到文件的表,但我得到的只是一个空白网页。即使以克里米亚为例,我也会得到一个空白页。
如果能得到指导或展示一个工作示例或建议我做错了什么,我将不胜感激。

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"]);
});
谢谢肖恩,你用这个答案削减了我清单上的一项任务。
2021-04-16 09:56:37
很有意思。非常感谢您的帮助。
2021-04-20 09:56:37
这个例子目前对我不起作用,td 元素是空的。你能不能看看这个问题stackoverflow.com/questions/23399462/...
2021-05-06 09:56:37
@shawn-allen 可用于生成表格以计算包含 1 个月数据的 CSV 的每日最小值/最大值和平均值
2021-05-15 09:56:37

@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 在他的回答中显示的那样),因为我不需要那个。所以代码比较简单。

fiddle

很抱歉将其添加为新答案,但我没有足够的分数将其添加为评论。只是对@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。