Как я могу исправить эту сортировку столбцов?

Question

Here is a JSFiddle проблемы, с которой я сейчас сталкиваюсь.

В принципе, у меня есть массив объектов, которые я использую для рисования некоторых баров. После сортировки массива я попытаюсь обновить позиции y баров, но это не сработает.

Таким образом, это масштаб я использую, чтобы сделать бары:

var yScale = d3.scale.ordinal() 
    .domain(d3.range(0, numberOfBars)) 
    .rangeBands([0, numberOfBars * barHeight]); 

Так что, если у меня есть 3 бара и бар 40px высокий, то я отображение 0-3 => 0-120px ,

Далее, у меня есть функция, которая использует эту шкалу, чтобы вернуть правильное y положения:

var y = function(d, i) { 
    return yScale(i); 
}; 

После нанесения брусков с помощью этой y функции, я затем отсортировать массив данных и попытаться перекроить бары:

barsContainer.selectAll('.bar') 
    .data(chartData.users) 
    .transition() 
     .duration(750) 
     .delay(delay) 
     .attr('y', y); // Not working. I thought this would order the bars. 
     //.attr('y', 120); // This works though. It moves all the bars to this y. 

Здесь я в тупике. Поскольку я переупорядочил массив (chartData.users), а так как строки «соединены» с данными, не должны ли бары менять их y в соответствии с новой позицией данных в массиве?

Answer 1

Итак, я понял, в чем проблема. Поскольку я сортировал массив объектов, D3.js не мог сам определить, какие объекты массива соответствуют объектам DOM. Так что я должен был создать ключевую функцию для идентификации объектов:

var key = function(d) { return d.id } 

Тогда все, что я должен был сделать вызов data() используя эту функцию клавиши, а затем order(), поэтому порядок DOM соответствует порядку массива:

barsContainer.selectAll('.bar') 
    .data(chartData.users, key) 
    .order() 
    .transition() 
    .delay(delay) 
    .duration(750) 
    .attr('y', y); 

Here's the working JSFiddle.

Answer 2

Ваша скрипка очень длинная. Я бы рекомендовал отложить его до минимального минимума и обратиться за помощью к этому конкретному вопросу.

Например, попробуйте протестировать

console.log(chartData.users) 

сразу после того, как вы объявили chartData. Он, похоже, идентичен отсортированному, поэтому это может быть не ошибка сортировки. Если вы сделаете еще какую-то работу самостоятельно, а затем зададите более конкретный, сжатый вопрос, вы, вероятно, получите больше ответов.

Удачи вам в D3!