当我尝试在 D3.js 中使用过滤器功能时,它会告诉我"data.filter is not a function."为什么?



我的数据都在一个长格式的CSV文件中,我希望用户能够选择他们想要可视化的国家/地区的数据。为此,我在 D3.js 中使用了过滤器函数。当他们选择一个国家/地区作为输入时,程序将过滤掉与"国家/地区名称"列中的输入不匹配的所有行。然后,它将可视化过滤后的数据。

我希望这样的事情会奏效。

data = data.filter(function(d) { return d.CountryName === "China"});

然而,当我这样做时,我得到"data.filter 不是一个函数"。 我已经看到了成功使用 data.filter 的 d3.js 代码...为什么在这里不起作用?

附加信息:

其中一条评论问数据是什么。以下是我对数据的看法:

data = d3.csv("econDataLong.csv", function(d) {
return {
CountryName: d.CountryName,
IndicatorName: d.IndicatorName,
Year: d.Year,
Value: +d.Value
} }
);
filtered = data.filter(function(d) { return d.CountryName === "China"});
console.log(filtered);

我一直在这样做,看看我是否可以让过滤器工作,但到目前为止还没有运气。

让我们看看 d3 的文档.csv (https://d3-wiki.readthedocs.io/zh_CN/master/CSV/(。他们说d3.csv(url[[, accessor], callback]).

您提供 url 和访问器,但没有回调。有几种方法可以做你想做的事,这是其中之一。请记住,d3.csv是异步的,因此代码不一定是从上到下执行的。

data = d3.csv("econDataLong.csv", function(d) {
return {
CountryName: d.CountryName,
IndicatorName: d.IndicatorName,
Year: d.Year,
Value: +d.Value
} 
filtered = data.filter(function(d) { return d.CountryName === "China"});
console.log(filtered);
});

更多示例可在 http://learnjsdata.com/read_data.html

最新更新