Изменение масштаба изображения D3.js от колесика мыши до контроля + колесико мыши

Question

От this question Я знаю, как отключить колесико мыши увеличить в D3.js. Как я могу переделать его, удерживая кнопку управления плюс колесико мыши? Благодарю.

Answer 1

Я нашел решение, которое не нуждается в изменении источника D3.js.

Я основано мое решение по этому вопросу: How to temporarily disable the zooming in d3.js

Вместо того, чтобы нажать на кнопку, чтобы включить/отключить масштабирование, я использовал KeyDown/KeyUp события:

svg.call(zoom = d3.behavior.zoom().on('zoom', redrawOnZoom)).on('dblclick.zoom', null); 

var zooming = false; 

function redrawOnZoom() { 
    if (zooming) { 
    svgContainer.attr('transform', 'translate(' + zoom.translate() + ')' + ' scale(' + zoom.scale() + ')'); 
    } 
}; 

d3.select("body").on("keydown", function() { 
    zooming = d3.event.ctrlKey; 
}); 

d3.select("body").on("keyup", function() { 
    zooming = false; 
}); 

Вот полный скрипку: https://jsfiddle.net/tabacof/dcbor8eL/3/

Answer 2

Добавить функцию фильтра в обработчик масштабирования (https://github.com/d3/d3-zoom#zoom_filter).

В d3.event элемент ctrlKey (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey) указывает, была ли нажата клавиша управления.

Возврат false в функцию фильтра игнорирует событие.

zoom.filter(function() { 
    return d3.event.ctrlKey; 
});