web-dev-qa-db-ja.com

ds.jsの配列へのcsv

私はこれを使用してcsvファイルを解析し、d3ドキュメントで指定されているように配列データを作成します：

_d3.csv("afile.csv", function(data) {
    data.forEach(function(d) {
    d.date = formatDate.parse(d.date);
    d.price = +d.price;
});
_

ただし、このメソッドの後で_data[0]_を呼び出そうとすると、未定義と表示されます。これは、dataが参照であり、d3.csv()がスコープ外になると破棄されるためですか？これが事実なら、どうすればこれを克服できますか。 d3.csv()からデータを参照する必要があります

csvd3.js
38
George Eracleous

d3.csvは非同期メソッドです。これは、データがロードされるとコールバック関数内のコードが実行されることを意味しますが、コードafter and outsideは、データがまだ利用可能でない場合、リクエストが行われた直後にコールバック関数が実行されます。言い換えると：

first();
d3.csv("path/to/file.csv", function(rows) {
  third();
});
second();

D3.csvによってロードされたデータを使用する場合は、そのコードをコールバック関数内に配置する必要があります（上記のthirdは次のとおりです）。

d3.csv("path/to/file.csv", function(rows) {
  doSomethingWithRows(rows);
});

function doSomethingWithRows(rows) {
  // do something with rows
}

または、ウィンドウ上のグローバル変数として保存して、後で参照できるようにすることもできます。

var rows;

d3.csv("path/to/file.csv", function(loadedRows) {
  rows = loadedRows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}

必要に応じて、変数を宣言してから2つの異なる名前を管理するのではなく、ロードされたデータをウィンドウオブジェクトに明示的に割り当てることもできます。

d3.csv("path/to/file.csv", function(rows) {
  window.rows = rows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}
130
mbostock

それは非同期呼び出しなので、あなたの問題はタイミングだと思います。したがって、データをロードしますが、d3コード内で関数を呼び出します（Mikeには「doSomethingWithRows（）」があります）。 d3コードにこれ以上の処理を加えないでください（マイクには「second（）」があります）。そのコードを「doSomethingWithRows（）」関数に移動します。データが利用可能になり、離れて行く...

3
Andrew NZ

問題はすでに解決されていると思いますが、同様の問題に直面し、上記の議論はそれほど役に立ちませんでした。そこで、この問題の解決方法を考え出した方法を投稿します。ここで、_data[0]_が未定義である理由は、おそらくデータ自体がブラウザーによって読み取られないためです。この読み取りの失敗は、データ（csv）ファイルを直接読み込むこと、つまり次のコマンドd3.csv("myCSVfile.csv",....)を使用することが原因である可能性があります。 Webアプリケーションは通常、Webサーバーからファイルをロードする必要があるため、このアプローチは機能しない可能性があります（この理由は不明です）。そのため、ローカルWebサーバーを配置する必要があります。 Pythonを使用してローカルHTTPサーバーをセットアップする方法 。ローカルWebサーバーの作成にPython 3を使用する場合、更新されたコードはd3.csv("http://localhost:8000/myCSVfile.csv",.....)になります。

0
Maneet