d3(v3またはv4)でCSVを読み取り、データを保存してコールバックする

レソロルザノフ

私は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]

編集
0

コメントを追加

0

関連記事

分類Dev

d3 v4でCSVを読み取る方法は?

分類Dev

d3 v4 / v5モジュールをNodeプロジェクトにインポートし、D3 v3名前空間スタイル(d3。)を維持するにはどうすればよいですか?

分類Dev

巨大なcsvファイルを読み取り、d3を使用してJavascriptでマップにデータを入力します

分類Dev

d3 v4: ヒストグラム データでスタックを使用しますか?

分類Dev

D3 v5 JSでCSVを読み取る:データの取得に問題があるのはなぜですか?

分類Dev

D3 V3またはJavaScriptを使用して、ボタンをクリックするたびにsvg要素の色を暗くします

分類Dev

Django D3がmongodbからcsvデータを読み取ってグラフをプロットする

分類Dev

D3 v4グラフはバーを更新しませんが、新しい軸データを追加します

分類Dev

d3 js v4 +スケール制限でズームとパンをマップします

分類Dev

D3マップは、キューを使用して2番目の外部jsonデータを読み取り、ホバーに表示する必要があります

分類Dev

ダイナミックデータフレームとして読み取ることなく、AWSグルーでS3からcsvおよびテキストファイルを読み取るための最良の方法は何ですか?

分類Dev

v4をインストールしたら、PowerShell v3を模倣できますか?

分類Dev

range-v3を使用して、コンマ区切りのデータを含む行を読み取る

分類Dev

d3 v4の要素に保存されているズーム変換をリセット/削除するにはどうすればよいですか?

分類Dev

D3 v4でSVGコンテナーを親コンテナーの幅と高さの100%にする(ピクセル単位ではなく)

分類Dev

D3.JS V4は、データを追加/更新した後にグラフ要素を更新します

分類Dev

D3 V4でズーム速度を制御する方法は?

分類Dev

D3バージョン4を使用したテーブルのデータ読み込みの問題

分類Dev

SDK V4 Nodedjsを使用して、エンドツーエンドの会話データをキャプチャし、ボットフレームワークのblobストレージまたはcosmosDBに保存する方法はありますか?

分類Dev

Azure Media Services v3を使用して.mp3(またはその他のオーディオのみ)ファイルからエンコードされた.mp4に空または空白のビデオレイヤーを生成するにはどうすればよいですか?

分類Dev

D3 V4:更新されたデータは新しいデータと見なされていますか?(更新機能)

分類Dev

特定のパターンでcsvファイルを読み取り、マップまたは2D配列に保存する

分類Dev

ボロノイセルはD3(v4)で機能を満たします

分類Dev

d3サンバーストv4でラベルを回転する

分類Dev

d3 v4でラベル付きのノードをドラッグすると、レイアウトの不具合が発生します

分類Dev

stxxlは、ディスクファイルからベクターを保存して読み取ります

分類Dev

D3 v4で、目盛りを中心にバーの幅を維持するにはどうすればよいですか?

分類Dev

コードを変換してバイトを読み取り、データを保存する

分類Dev

s3でのコードの最適化はcsvを読み取り、s3バケットに取り込みます

Related 関連記事

  1. 1

    d3 v4でCSVを読み取る方法は?

  2. 2

    d3 v4 / v5モジュールをNodeプロジェクトにインポートし、D3 v3名前空間スタイル(d3。)を維持するにはどうすればよいですか?

  3. 3

    巨大なcsvファイルを読み取り、d3を使用してJavascriptでマップにデータを入力します

  4. 4

    d3 v4: ヒストグラム データでスタックを使用しますか?

  5. 5

    D3 v5 JSでCSVを読み取る:データの取得に問題があるのはなぜですか?

  6. 6

    D3 V3またはJavaScriptを使用して、ボタンをクリックするたびにsvg要素の色を暗くします

  7. 7

    Django D3がmongodbからcsvデータを読み取ってグラフをプロットする

  8. 8

    D3 v4グラフはバーを更新しませんが、新しい軸データを追加します

  9. 9

    d3 js v4 +スケール制限でズームとパンをマップします

  10. 10

    D3マップは、キューを使用して2番目の外部jsonデータを読み取り、ホバーに表示する必要があります

  11. 11

    ダイナミックデータフレームとして読み取ることなく、AWSグルーでS3からcsvおよびテキストファイルを読み取るための最良の方法は何ですか?

  12. 12

    v4をインストールしたら、PowerShell v3を模倣できますか?

  13. 13

    range-v3を使用して、コンマ区切りのデータを含む行を読み取る

  14. 14

    d3 v4の要素に保存されているズーム変換をリセット/削除するにはどうすればよいですか?

  15. 15

    D3 v4でSVGコンテナーを親コンテナーの幅と高さの100%にする(ピクセル単位ではなく)

  16. 16

    D3.JS V4は、データを追加/更新した後にグラフ要素を更新します

  17. 17

    D3 V4でズーム速度を制御する方法は?

  18. 18

    D3バージョン4を使用したテーブルのデータ読み込みの問題

  19. 19

    SDK V4 Nodedjsを使用して、エンドツーエンドの会話データをキャプチャし、ボットフレームワークのblobストレージまたはcosmosDBに保存する方法はありますか?

  20. 20

    Azure Media Services v3を使用して.mp3(またはその他のオーディオのみ)ファイルからエンコードされた.mp4に空または空白のビデオレイヤーを生成するにはどうすればよいですか?

  21. 21

    D3 V4:更新されたデータは新しいデータと見なされていますか?(更新機能)

  22. 22

    特定のパターンでcsvファイルを読み取り、マップまたは2D配列に保存する

  23. 23

    ボロノイセルはD3(v4)で機能を満たします

  24. 24

    d3サンバーストv4でラベルを回転する

  25. 25

    d3 v4でラベル付きのノードをドラッグすると、レイアウトの不具合が発生します

  26. 26

    stxxlは、ディスクファイルからベクターを保存して読み取ります

  27. 27

    D3 v4で、目盛りを中心にバーの幅を維持するにはどうすればよいですか?

  28. 28

    コードを変換してバイトを読み取り、データを保存する

  29. 29

    s3でのコードの最適化はcsvを読み取り、s3バケットに取り込みます

ホットタグ

アーカイブ