0

D3 で CSV から解析されたデータを取得しようとしています。一度解析し、配列を変数に格納して、複数の関数がアクセスできるようにします。私は、残念ながら、親変数がそれを可能にする名前空間モジュール内で作業しています。簡単な例を次に示します。

var namespace = namespace || {};

namespace.module = function() {
  var dataItems;                   <== want to be accessible to all functions inside module

  function getData() {
    d3.csv('data.csv', function(d) { 
      dataItems = d; 
    });
  }

  function drawChartA() {
    // want to have access to parsed CSV data here
    console.log(dataItems);         <== "error: undefined"
  }

  return {
    getData:    getData,
    drawChartA: drawChartA
  }
}();

// run code 
$(document).ready(function() {
  namespace.module.getData();
  namespace.module.drawChartA();
});

解析された配列にアクセスできるように見える唯一の方法は、 getData() 関数のスコープ内ですが、外側ではありません。drawChartA メソッド内から getData() を呼び出してみましたが、最初は同じ結果でした。別の投稿では、vars を Window オブジェクトの下に格納することを提案していましたが、名前空間モジュール内ですべてを処理する方法があるべきではありませんか? そのすべてについてまだ学んでいます..アドバイスしてください！:)

4

2 に答える 2

3

1 つの方法は、次のように d3.csv 呼び出し内から関数を呼び出すことです。

d3.csv('data.csv', function(error, data) {
    drawChartA(data);
}

または、次のように drawChartA 関数内にすべてを囲むこともできます。

function drawChartA() {
    d3.csv('data.csv', function(error, data) {
        //Do chart A stuff
    }
}();

これは、非常によく似たテーマに関するMike Bostockの投稿へのリンクです。

于 2013-09-16T09:06:20.453 に答える
2

d3.csv の 2 番目のパラメーターは、非同期コールバックです。サーバーにヒットしてdata.csvファイルをロードします。drawChartA をすぐに呼び出すと、リクエストが返されていないため、null が返されます。

getData 関数にコールバックが必要になります。

function getData(file, callback) {
  d3.csv(file, function(d) { 
    callback(d);
  });
}

次に、コールバックで描画コードを呼び出します。

namespace.module.getData(function(data) {
  namespace.module.drawChartA();
});

複数の CSV ロードの場合:

// files = ['data1.csv', 'data2.csv', 'data3.csv'];
function getAllData(files, callback) {
  var loadedCount = 0;
  for (var i = 0; i < files; i++) {
    getData(files[i], function(data) {
      dataItems = dataItems.concat(data);
      loadedCount++;
      if (loadedCount === files.length) {
        callback(dataItems);
      }
    }
  }
}

次のように使用できます。

// display loading wheel
namespace.module.getAllData(['data1.csv', 'data2.csv', 'data3.csv'],
  function(dataItems) {
    // process data
    // hide loading wheel
    namespace.module.drawChartA();
});
于 2013-09-16T17:10:56.043 に答える