创建链接到 csv 文件的表 [英] Creating a table linked to a csv file

问题描述

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

I am trying to create a table linked to a *.csv file using d3, but all I get is a blank webpage. Even with the example Crimea I get a blank page.
I would be grateful to be directed or shown a working example or a suggestion of what I am doing wrong.

推荐答案

如果您要从 CSV 数据创建 HTML 表格，这就是您想要的:

If you're asking about creating an HTML table from CSV data, this is what you want:

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 数据一起使用，如下所示:

Check out the working example. If you're copying that code, you'll need to update the tabulate() function so that it either selects an existing table or a different container (rather than "#container"), then you can use it with CSV data like so:

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

这篇关于创建链接到 csv 文件的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！