Question

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

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

查看working example。如果您要复制该代码，则需要更新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)]};

享受！

Answer 3

通常，我需要定期刷新数据表。以下是我使用数据填充表格的方法：

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

Answer 4

我很抱歉将其添加为新答案，但我没有足够的要点将其添加为评论。只需稍微调整一下@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; });

}）;

无需使用column，value创建该JSON。

创建链接到csv文件的表

4 个答案: