创建链接到csv文件的表

Question

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

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; });
});

查看工作示例.如果您要复制该代码,则需要更新该tabulate()函数,以便选择现有表或不同的容器(而不是"#container"),然后您可以将其与CSV数据一起使用,如下所示:

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

Answer 2

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

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

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

通过这个

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

请享用 ！