Этот вопрос очень похож на на этот, но я все еще не могу понять, можно ли использовать d3.behavior.zoom, но без панорамирования способность. Другими словами, я просто хочу увеличить/уменьшить, используя только колесо.
Причиной этого является то, что я хочу иметь возможность кисти в области "масштабируемого".
Спасибо!
Предположим, вы определили поведение масштабирования:
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);
Я не уверен, что вы хотите удалить события касания. Это может привести к двойному масштабированию. Вы должны поэкспериментировать с ними.
Я предполагаю, что было бы неплохо поделиться обходным решением, которое я нашел для решения этой проблемы. То, что я сделал, - это использовать слушателя в начале кисти для "деактивации" масштабирования:
zoom.on("zoom",null);
selection.call(zoom);
и снова активировать его на событии brushend.
Существует еще один трюк, который следует учитывать и исходит из того, что важно сохранить значения масштабирования и перехода для последнего действительного действия масштабирования, чтобы использовать эти значения при активации кисти в событии brushend, например это
zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom);
selection.call(scatterZoom);
Мне бы хотелось услышать другие более "элегантные" решения этой проблемы.
Одно из решений, которое я нашел, - это привязать элемент прямоугольника перед элементом с включенным увеличением (они должны быть братьями и сестрами) и установить его заливку на "прозрачный", когда мне нужно отключить трансляцию масштабирования или "нет", когда я хотел включить масштабирование. Это выглядело примерно так:
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');
}