我正在尝试在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的两列）。
首先，无法通过加载/解析nCSV的第一行，这d3.csv恐怕是不可能的。不幸的是，您将不得不加载/解析所有文件，如果文件很大，这可能会很不方便，这意味着用户将不得不等待整个文件加载/解析之后才能绘制图表。另外，值得一提的是，由于d3.csv将所有文件加载到后续过滤器中都将是无关紧要的：仅使用所需的数据行，不要向浏览器添加更多不必要的任务，只需使用所需的行来绘制图表即可。
回到您的主要问题：
您的数据是一个数组。这里的问题是，您使用的d3.csv好像是XHR，D3 v4就是这种情况……但是，在D3 v5中，这d3.csv是一个希望。
因此，必须为：
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;
}));
})<script src="https://d3js.org/d3.v5.min.js"></script>关于第二个问题，d3.csv在名为的数组属性中公开列columns：
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)
})<script src="https://d3js.org/d3.v5.min.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句