Creating a table linked to a csv file

后端 未结 4 1751
暖寄归人
暖寄归人 2020-11-28 02:39

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

4条回答
  •  旧时难觅i
    2020-11-28 03:17

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

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

提交回复
热议问题