D3.JS treemap несогласованное поведение масштабирования

Question

Я пытаюсь сделать меню сорта с d3.js treemap. В основном это работает, но у меня есть несколько сбоев, которые я не могу точно определить.

В основном, иногда моя диаграмма не масштабируется правильно, и вместо того, чтобы видеть, как дети берут всю область SVG, они отображают «unzoomed».

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

У меня есть аналогичный пример установки в JSBIN.

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

Любая помощь приветствуется!

Answer 1

Ну, это может быть немного неортодоксально, но я нашел способ преодолеть это.

В принципе, вместо того, чтобы пытаться запутаться с регистрацией/регистрацией событий, я просто запустил зум только в том случае, если клик не был у узла на текущем уровне масштабирования.

Итак, в моей zoom функции, я завернул обработку в if проверке зума:

function zoom(d) { 

    if(node!=d){ 

    // the rest remains the same 

    } 
} 

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

Here рабочая версия.

Надеюсь, это поможет кому-то еще!

EDIT: Это решение не является совершенным. Теперь иногда клик просто ничего не делает - но это лучше, чем укусить пользовательский интерфейс. Если у кого-то есть другие идеи, они приветствуются.