私はd3jsv4を使用してcsvファイルを取得して読み取ります。私はフレームワークを使用していません。ここに示すように使用するだけです:https://github.com/d3/d3-fetch/blob/master/README.md#csv
すべての例で、コンソールに送信するだけであることに気付きました。ログと私は本当にオブジェクトに保存されたデータを保持する必要があります。
コールバックでconsole.log()を実行すると、それらが出力されるため、ファイルを読み取ってデータを取得していることがわかりますが、内部に変数を作成したり、「this」から取得した変数を使用したり、コピーしたりしてもオブジェクトへの値、それはすべて失敗します。これは、ファイルが読み取られて機能するために非同期であるためではなく、スコープ外になります。d3.csvの範囲外で保存する必要があります。
解析されたCSVオブジェクトをコピーするための2つのオプションを備えたコードの単純なバージョン。
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
が呼び出された場合、returnanswerには値がありません。
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
ここで、read CSV addを呼び出してからコールバックを呼び出し、ajaxからオブジェクトが返されるようにします。
containerObject.readCSV().then(function(data) {
//do your stuff with csv parsed data.
})
約束の実例
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加