Как отключить панорамирование для d3.behavior.zoom?

Ответ 1

Предположим, вы определили поведение масштабирования:

var zoom = d3.behavior.zoom().on('zoom', update);

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

selection.call(zoom)
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);

Я не уверен, что вы хотите удалить события касания. Это может привести к двойному масштабированию. Вы должны поэкспериментировать с ними.

Ответ 2

Я предполагаю, что было бы неплохо поделиться обходным решением, которое я нашел для решения этой проблемы. То, что я сделал, - это использовать слушателя в начале кисти для "деактивации" масштабирования:

zoom.on("zoom",null);
selection.call(zoom);

и снова активировать его на событии brushend.

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

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom);
selection.call(scatterZoom);

Мне бы хотелось услышать другие более "элегантные" решения этой проблемы.

Ответ 3

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

if (chart._disableZoom) {
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet
       //.stopEventPanel is appended next to the zoom-enabled element
        rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent');
    } else { // disable zoom and pan
        rootPanel.select('.stopEventPanel').attr('fill', 'transparent');
    }
} else { // enable zoom and pan
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none');
}