D3.queue - プログラムフローを理解する

Question

私はd3.queueのプログラムフローを本当に理解しようとしています。

次の例を整理しました。

おそらく、この例とその答えは、他人がこのトリッキーなパターンを理解するのに役立つかもしれません。現時点で

、私は次のようしている：関数は（終了時

var finished = function(error, results) { 
console.log(results); 
}; 

var fn_1 = function(i, callback) { 
console.log("fn_ 1 called with this argument " +i); 
callback(null, "from function 1"); 
}; 


d3.queue(1) 
    .defer(function(url, callback) { 
    d3.csv(url, function(data) { 
    test_data = data.map(function(d) { return fn_parse_m_tot(d);}); 
    callback(null, "hi there in first function"); 
    }); 

}, url) 

.defer(fn_1, "arg1") 
.await(finished); 

私は、次のような結果を期待しています）を実行する：

"こんにちは最初の関数で"

」機能1" から

しかし、私は、次を得る：

「最初の関数があります」

fn_1（）に埋め込まれたコールバックは実行されていないようです... ...？

Answer 1

.deferの最初の引数は、非同期タスク（つまり関数）です。後続の引数はすべて、そのタスクの（オプションの）引数です。あなたの最初のタスクはURLとコールバックを必要とするので、それらを提供する必要があります。そうでなければ、あなたのタスクのボディには定義されません。あなたは、あなたのタスクを宣言することができ

fn_0最初：

var fn_0 = function(url, callback) { 
    console.log('fn_0 (url: ' + url + '; callback: ' + callback + ')'); 
    d3.csv(url, function(error, data) { 
    if (error) { 
     console.log('d3.csv was called but there was an error downloading the data'); 
     throw error; 
    }; 
    test_data = data.map(function(d) { return fn_parse_m_tot(d); }); 
    callback(null, "from fn_0"); 
    }); 
}; 

fn_1は、あなたのキューのために別のタスクです。ここでは何も変更する必要はありません。

var fn_2 = function(a, b) { 
    console.log('fn_2 (a: ' + a + '; b: ' + b + ')'); 
}; 

今すぐあなたのキュー内のコードがはるかに読みやすいです：ここで

d3.queue() 
    .defer(fn_0, 'url-to-your-csv-file', fn_2) 
    .defer(fn_1, 'arg1', fn_2) 
    .await(finished); 

がJSFiddleある

fn_2はあなたのコールバックです。

d3.queue(1)と記述すると、すべてのタスクが連続して実行されるため、タスクはすべての前のタスクが成功した場合にのみ実行されます。

d3-queue API documentationを参照してください。