javascript - 当我尝试在 D3.js 中使用 filter 函数时，它告诉我“data.filter 不是函数”。为什么？

Question

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

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

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

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

标签： javascriptd3.jsfilterdata-visualization

Answer 1

让我们看看 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找到