D3コードクリーナーを作るにはどうすればいいですか

Question

私はd3トランジションをハックしてここでチェックしています。

https://jsfiddle.net/guanzo/k1xw6ace/14/

ここで基本的な考え方です：

SVGの高さが十分でない場合には、私は2列の可能性を処理する必要があります。

すべてのトランジションはフェードイン/アウトで、x軸は+/- 30pxに変換されます。

initialLoadにすべての凡例が表示されます。

「再配置」ボタンをクリックしてデータが終了すると、終了する凡例はすぐに遷移し、最後の凡例が終了すると残りの凡例が新しい位置に移行します。

あなたがもう一度ボタンをクリックして、データを入力すると、更新の伝説はすぐに最後の更新遷移した後、進入伝説に移行します、彼らの新しい位置（伝説に入る考慮して）に移行します。

私の問題私のコードは、不器用な選択と競合する入力/更新状態に対処するためにsetTimeoutsといくつかのハックに依存しているということです。たとえばについては

データは、彼らの新しい位置を決定するために、私はselectAllupdateとenter伝説に必要入ります。しかし、私は両方のグループに異なる遷移を設定する必要があります。

移行順序は、データの入力または終了の有無によって異なります。データが入力されている場合は、updateの選択が最初に遷移し、次にenterの選択が遷移します。データが存在する場合は、exit選択が最初に遷移し、次にupdateが選択されます。どのように私はこの逆の関係をエレガントにコード化するのですか？

私はちょうどこれを行うための最善の方法に混乱しています。

Answer 1

最初の移行が完了した後、私はチェーンの遷移にこのトリックを学んだ：

function endall(transition, callback) { 
    if (transition.size() === 0) { 
     callback() 
    } 
    var n = 0; 
    transition 
     .each(function() { 
      ++n; 
     }) 
     .each("end", function() { 
      if (!--n) callback.apply(this, arguments); 
     }); 
} 

を、あなたの移行機能に：

selection.transition() 
    .attr("cx", xMap) 
    .attr("cy", yMap) 
    .call(endall, function() { 
     console.log("all loaded"); 
     // do your next transition 
    });