d3 csv在回调后丢弃数据

Posted 2021-03-30

我正在使用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;
    }
}

注意：有时会发生这种情况，最近全部都在工作，现在却没有。

谢谢你们

答案

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

我建议你使用诺言：

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的一个工作示例