D3 - привязка события к другому событию

Question

Вот несколько примеров создания гистограмм из книги Скотта Мюррея «Интерактивная визуализация данных для Интернета». Код позволяет создавать гистограммы, обновлять (добавлять/удалять) и сортировать. Он отлично работает, за исключением того, что я не могу заставить кнопку сортировки работать. Я знаю, что функция сортировки работает, потому что я добавил событие click (которое запускает функцию сортировки) для каждого бара. Поэтому, когда нажимается панель, бары сортируются.

Вот JSfiddle - http://jsfiddle.net/kiniadit/k812fo53/3/

Вот сегмент кода (строки 74-77), который не работает

else if(btnClass == "sort"){ 
    sortBars(); 
    sortLabels(); 
} 

Answer 1

Проблема заключается в том, каким образом вы Наладка функции обработчика событий щелчка. Вы выбираете все кнопки и прикрепляете один обработчик, который сам определяет, что делать. Этот обработчик запускает код для обновления баров для всех кнопок, независимо от того, что произошло раньше.

В вашем конкретном случае это означает, что сортировка выполнена правильно и соответствующие переходы настроены, но затем немедленно отменены кодом, который обновляет столбцы (для обработки добавленных/удаленных значений). В этом случае это ничего не делает, поэтому единственный эффект - это отменить все, что настроил обработчик сортировки.

Чтобы исправить, просто выйти из функции после вызова функции сортировки:

return; 

Полная демо here.