Question

所以，就在最近，我一直在使用D3.js来解析CSV文件中的数据。在阅读Scott Murray撰写的“交互式数据可视化”（精彩的书籍和非常丰富的信息）时，它解释了如何从CSV中的表格中选择所有数据。

解析CSV的代码如下所示：

d3.text("three.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);
            var container = d3.select("#thirdCSV")  
                .append("div")

                .append("table")
                    .attr("id", "tableThree")

                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .attr("id","three")
                    .text(function(d) { return d; });

    });

对于我的项目，我正在使用7种不同的CSV文件并将其放在HTML格式中。

编写7x以上的代码似乎是不必要的，还有另一种解析多个CSV文件的方法吗？如果是这样，是否还有一种解析特定列的方法，如D-F列？这是一个如何设置其中一个文件的图像（其余的CSV文件格式相同。

Answer 1

在D3 d3.csv()中的csv文件中有一个特定的function用于阅读。您应该使用它而不是d3.text()，因为它使事情变得更容易，因为您不需要另外使用d3.csv.parseRows()。例如，查看this block。

您可以使用d3.queue() function异步加载多个数据文件。它等待在下一步采取之前加载所有文件。你应该像这样使用它：

var q = d3.queue()
    .defer(d3.csv, "first.csv")
    .defer(d3.csv, "second.csv")
    .defer(d3.csv, "third.csv")
    ....
    .awaitAll(function(error, results) {
      if (error) throw error;
      console.log(results);
      draw(results)
    });

我还想指出，D3.queue()函数不包含在D3 v3默认包中，因此您必须单独加载它：

<script src="https://d3js.org/d3-queue.v3.min.js"></script>

从多个CSV文件中解析特定列/数据

1 个答案: