D3 - データに基づいて要素を並べ替えます

Question

サッカーチーム内のサッカー選手を表す複合棒グラフを作成しました。グラフはここにあります：http://andybarefoot.com/football/path.html

私はd3を使い、2段階で作業するようにページを構築しました。まず、データをロードして各プレーヤーの四角形を作成します。次に、どのビューが選択されたかに応じて、各要素に割り当てられたデータに基づいて矩形のパラメータを更新します。つまり、さまざまなナビゲーションオプションは、要素にマップされた既存のデータに基づいて矩形のサイズを変更し、再配置しますが、追加のデータはロードされません。

矩形のサイズ変更は正しく機能しますが、データ。

各矩形の垂直位置は、単に「i」に設定されたスペーシング変数を掛けて設定します。順序を変更するには、すべての要素すべてを選択し、関連するデータに基づいてソートしてから、同様に新しい垂直位置を設定することができます。 （すなわち、「i」の値が変化した）。しかし、私はこれを動作させることはできません。 D3で

// select all elements and then reorder 
svg 
    .selectAll(".team") 
    .sort(function(a, b) { 
     return b.totalClubContractDistance - a.totalClubContractDistance; 
    }) 
; 
// select all elements and reposition according to new order 
svg 
    .selectAll(".team") 
    .duration(750) 
    .attr("transform", function(d,i) { 
     return "translate(0,"+teamSpacing*i+")"; 
    }) 
; 

Answer 1

4つのコアの概念があります。ここでは

は私の（失敗した）の試みです。参加、更新、入力、終了。 https://bost.ocks.org/mike/join/

基本的に、要素の位置を更新するたびに、データを変更してからジョインして更新する必要があります。

ので、コードは次のようになります。

function render (data) { 
    // join 
    // this joins the new data to the existing data 
    var teams = svg.selectAll('.team') 
     .data(data); 

    // update 
    // this will update existing teams that have a different location 
    teams.attr('transform', function (d, i) { 
     return 'translate(0, ' + teamSpacing * i + ')'; 
    }); 

    // enter 
    // this will add new teams that were added to the data set 
    teams.enter() 
     .attr('transform', function (d, i) { 
      return 'translate(0, ' + teamSpacing * i + ')'; 
     }); 

    // exit 
    // this will remove all the teams that are no longer part of the data set 
    teams.exit() 
     .remove(); 

} 

希望これは