D3 - 根據數據重新排序元素

Question

我製作了一個複合條形圖表示足球隊內的足球運動員。圖表在這裏：http://andybarefoot.com/football/path.html

我用d3和建立的頁面分兩個階段工作。首先我加載數​​據併爲每個玩家創建一個矩形。然後根據分配給每個元素的數據更新矩形的參數，具體取決於選擇哪個視圖。這意味着不同的導航選項根據映射到元素的現有數據重新調整大小和重新排列矩形，但不會加載其他數據。

雖然矩形的大小調整正常，但我無法重新排列基於矩形的矩形數據。

每個矩形的垂直位置由「i」乘以設置的間距變量設置。要改變順序，我想我可以選擇所有的元素，根據相關數據進行排序，然後用相同的方法設置新的垂直位置。 （即「我」的價值會發生變化）。不過，我無法得到這個工作。

這裏是我的（失敗）的嘗試：

// 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

在D3中有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(); 

} 

希望這有助於