Блог

Я создал составную гистограмму, представляющую футболистов в футбольных командах. Диаграмма здесь: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 ")";
    })
;
  

В 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();

}
  

Надеюсь, это поможет