Создание элементов флажка на лету с jQuery - нечетное поведение IE

Если вам нужно прервать переход, в d3-переходе есть метод для этого:

selection.interrupt();

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

Если это общая версия вашей функции для отображения элемента:

function show() {
  selectionToHide.attr("opacity",0);

  selectionToShow.transition()
     .attr("opacity",1);
}

Без использования selection.interrupt вы устанавливаете непрозрачность в ноль, а затем следующий тик любого перехода в прогресс продолжает обновлять непрозрачность и заканчивает выполнение перехода. Добавляя прерывание, мы избегаем этого. Вот обновленная скрипка .

Однако, есть другое решение - мы можем применить другой переход к элементам, которые мы не хотим показывать. Для этого мы просто заменим переход на новый:

function show() {
  selectionToHide.transition()
     .attr("opacity",0);

  selectionToShow.transition()
     .attr("opacity",1);
}

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

Я не касался прокрутки, показанный круг должен иметь индекс, соответствующий отображаемому номеру, но кажется, что число не всегда соответствует позиции прокрутки, но это отдельная проблема [117 ]