D3 - элементы переупорядочения на основе их данных

Question

Я сделал сложную гистограмму, представляющую футболистов в футбольных командах. Диаграмма находится здесь: http://andybarefoot.com/football/path.html

Я использовал d3 и построил страницу для работы в два этапа. Во-первых, я загружаю данные и создаю прямоугольник для каждого игрока. Затем я обновляю параметры прямоугольников на основе данных, назначенных каждому элементу, в зависимости от выбранного вида. Это означает, что различные параметры навигации изменяют размер и изменяют прямоугольники на основе существующих данных, сопоставленных с элементами, но не загружаются дополнительные данные.

Хотя изменение размеров прямоугольников работает правильно, я не могу изменить порядок прямоугольников на основе данные.

Вертикальное положение каждого прямоугольника устанавливается просто «i», умноженное на заданную переменную расстояния. Чтобы изменить порядок, я думал, что могу выбратьВсе все элементы, сортировать на основе соответствующих данных, а затем установить новую вертикальную позицию таким же образом. (т. е. значение «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(); 

} 

Надеется, что это помогает