javascript - 使用 d3(v3 或 v4)读取 CSV，保存数据并回调

Question

我正在使用 d3js v4 来获取和读取 csv 文件。我没有使用任何框架。只需像这里显示的那样使用它:https://github.com/d3/d3-fetch/blob/master/README.md#csv

我注意到在所有示例中，他们只是将其发送到控制台。日志，我真的需要将数据存储在对象中。

如果我在回调中执行 console.log() 它会打印它们，所以我知道它正在读取文件并带来数据，但即使我在内部创建了一个变量，或者我使用了从“this”带来的变量，或将值复制到对象中，都将失败。这不是因为异步性，因为文件被读取并且它可以工作，然后它超出了范围。我需要将其保存在 d3.csv 的范围之外。

一个简单版本的代码，有两个选项来尝试复制已解析的 CSV 对象。

containerobject = {
    readCSV: function (astring, thecsv) {
        console.log(astring); 
        console.log(thecsv);
        var answer; //I want to store the parsed csv here
        var request = d3.csv(
            thecsv,
            function (d) {
                return {
                    name: d.name,
                    x: Number(d.x),
                    y: Number(d.y)
                };
            },
            function (rows) {
                if (rows === undefined || rows === null) {
                    alert('error');
                }
                if (astring == "one") {
                    answer = d3.nest()
                        .key(function (d) { return d.letters; })
                        .entries(rows); //console.log(answer); This prints
                } else if (astring == "two") {
                    answer = Object.assign({},(function(){ return d3.nest()
                        .key(function (d) { return d.letters; })
                        .entries(rows);}())); //console.log(answer); This prints
                }
            }
        );
        console.log("answer", answer); // this is undefined
        return answer;
    }
}

注意:有时会发生这种情况，最近一切正常，现在就不行了。

谢谢大家

Answer 1

问题是 var request = d3.csv(...) 是一个 ajax 调用。 因此调用 readCSV 时返回的答案将没有任何值。

我建议你使用promise:

containerobject = {
    readCSV: function (astring, thecsv) {
        console.log(astring); 
        console.log(thecsv);
        var answer; //I want to store the parsed csv here
        var promise = new Promise(function(resolve, reject){
        var request = d3.csv(
            thecsv,
            function (d) {
                return {
                    name: d.name,
                    x: Number(d.x),
                    y: Number(d.y)
                };
            },
            function (rows) {
                if (rows === undefined || rows === null) {
                    promise.reject('error');
                }
                if (astring == "one") {
                    promise.resolve(d3.nest()
                        .key(function (d) { return d.letters; })
                        .entries(rows));
                } else if (astring == "two") {
                    promise.resolve(Object.assign({},(function(){ return d3.nest()
                        .key(function (d) { return d.letters; })
                        .entries(rows);}())))
                }
            }
        );

        })

        return promise;
    }
}

变2

现在在您调用读取 CSV 添加然后回调以获取从 ajax 返回的对象的地方。

containerObject.readCSV().then(function(data) {
 //do your stuff with csv parsed data.
})

promise 的工作示例