在D3 v5中使用d3.csv动态加载数据

Question

我正在尝试在d3.js中构建动态加载的条形图，该条形图将从后端部分加载数据。使用此d3.csv()功能，是否有任何方法可以n从数据中读取第一个行数以进行初始绘制，然后按照我的JS逻辑加载后续数据？

tl; dr我想有选择地访问d3.csv()函数中的数据。

我正在尝试运行以下代码：

var margin = {
            top: 20,
            bottom: 30,
            left: 40,
            right: 30
        },
        width = 600 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var loadData = function() {
        d3.csv("test_data.csv", function(data) {
            console.log(data.filter(function(d, i) {
                return i < 2;
            }));

            console.log(data.filter(function(d, i) {
                return i < 3;
            }))
        })
    }

    loadData();

但是，控制台出现错误：

未捕获（承诺）TypeError：data.filter不是函数（…）

这使我相信此数据不是数组。是这种情况还是我在这里面临其他问题？

另外，如何访问此d3.csv函数内的列（在csv文件中）？（例如，如果我的csv数据文件包含名为a和b的两列）。

Answer 1

首先，无法通过加载/解析nCSV 的第一行，这d3.csv恐怕是不可能的。不幸的是，您将不得不加载/解析所有文件，如果文件很大，这可能会带来不便，这意味着用户将不得不等待整个文件加载/解析后才能绘制图表。另外，值得一提的是，由于d3.csv将所有文件加载到后续过滤器中都是无关紧要的：仅使用所需的数据行，不要向浏览器添加更多不必要的任务，只需使用所需的行来绘制图表即可。

回到您的主要问题：

您的数据是一个数组。这里的问题是，您使用的d3.csv好像是XHR，D3 v4就是这种情况……但是，在D3 v5中，这d3.csv是一个希望。

因此，必须为：

d3.csv(url).then(callback);

看看下面的演示：

d3.csv(url).then(callback);

var csv = URL.createObjectURL(new Blob([
  `foo,bar,baz
12,43,21
45,54,21
87,13,17
98,69,17`
]));

d3.csv(csv).then(function(data) {
  console.log(data.filter(function(d, i) {
    return i < 2;
  }));
})

关于第二个问题，d3.csv在名为的数组属性中公开列columns：

<script src="https://d3js.org/d3.v5.min.js"></script>

var csv = URL.createObjectURL(new Blob([
  `foo,bar,baz
12,43,21
45,54,21
87,13,17
98,69,17`
]));

d3.csv(csv).then(function(data) {
  console.log("columns are: " + data.columns)
})