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

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

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

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

else if(btnClass == "sort"){
 sortBars();
 sortLabels();
}
1 ответ

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

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

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

return;

Полное демо здесь.

licensed under cc by-sa 3.0 with attribution.