Javascript 如何使用覆盖和Ctrl+实现像谷歌地图一样的D3鼠标滚轮缩放；滚动事件？

我使用D3JS实现了缩放，因此每当鼠标悬停在画布上时，缩放事件就会触发，并允许用户使用鼠标滚轮进行放大和缩小

演示：

但我想防止D3缩放的这种默认行为，并需要强制用户对用户Ctrl+滚动来缩放画布，就像谷歌地图那样：

无论如何，我们可以显示覆盖，要求用户使用组合，然后只允许缩放

我的缩放代码如下所示：

var svg = d3.select("#collapsible-tree")
    .append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .call(zm = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", redraw))
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Redraw for zoom
function redraw() {
    //console.log("here", d3.event.translate, d3.event.scale);
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

---

几周前我也有同样的问题。但我用的是dagreD3。我使用的函数来自D3。这是我的工作小提琴

//创建新的有向图
var g=new dagreD3.graphlib.Graph（）.setGraph（{}）
.setDefaultEdgeLabel（函数（）{
返回{}；
});
//使用strg+鼠标滚轮禁用浏览器缩放
$（文档）.keydown（函数（事件）{
如果（event.ctrlKey==true&&（event.which='61'| | event.which='107'| | event.which='173'| | event.which='109'| | event.which='187'| | event.which='189'））{
警报（“禁用缩放”）；
event.preventDefault（）；
}
});
$（窗口）.bind（'mousewheel-DOMMouseScroll'，函数（事件）{
如果（event.ctrlKey==true）{
event.preventDefault（）；
}
});
//检查是否按下了strg
var ctrlPressed=假；
$（窗口）.keydown（函数（evt）{
如果（evt.which==17）{
ctrlPressed=真；
控制台日志（“按下”）；
}
}).keyup（功能（evt）{
如果（evt.which==17）{
ctrlPressed=false；
控制台日志（“未按下”）；
}
});
//添加节点和边
g、 setNode（0{
标签：“顶部”，
});
g、 集合节点（1{
标签：“S”，
});
g、 集合节点（2{
标签：“NP”，
});
g、 集合节点（3{
标签：“DT”，
});
g、 集合节点（4{
标签：“这个”，
});
g、 集合节点（5{
标签：“VP”，
});
g、 集合节点（6{
标签：“VBZ”，
});
g、 集合节点（7{
标签：“是”，
});
g、 集合节点（8{
标签：“NP”，
});
g、 集合节点（9{
标签：“DT”，
});
g、 集合节点（10{
标签：“安”，
});
g、 集合节点（11{
标签：“NN”，
});
g、 集合节点（12{
标签：“示例”，
});
g、 集合节点（13{
标签：“.”，
});
g、 集合节点（14{
标签：“句子”，
});
g、 setEdge（3,4）；
g、 setEdge（2,3）；
g、 setEdge（1,2）；
g、 setEdge（6,7）；
g、 setEdge（5,6）；
g、 setEdge（9,10）；
g、 setEdge（8,9）；
g、 setEdge（11,12）；
g、 setEdge（8,11）；
g、 setEdge（5,8）；
g、 setEdge（1,5）；
g、 setEdge（13,14）；
g、 setEdge（1,13）；
g、 setEdge（0,1）；
//绕过节点的角
g、 nodes（）.forEach（函数（v）{
var节点=g节点（v）；
node.rx=node.ry=5；
});
//使线条流畅
g、 边（）.forEach（函数（e）{
var边缘=g边缘（e.v，e.w）；
edge.lineInterpolate='基础'；
});
//创建渲染器
var render=new dagreD3.render（）；
可变宽度=500，
高度=1000，
中心=[宽度/2，高度/2]；
//设置一个SVG组，以便我们可以翻译最终的图形。
var svg=d3。选择（“svg”），
内部=svg.append（“g”）；
var zoom=d3.behavior.zoom（）
。打开（“缩放”，缩放）；
函数缩放（）{
internal.attr（“transform”、“translate”（+zoom.translate（）+））scale（+zoom.scale（）+））；
}
调用（缩放）
svg.on（“wheel.zoom”，null）；
on（“dblclick.zoom”，null）；
调用（zoom.event）；
document.getElementById（“容器”）.addEventListener（“轮子”，myFunction）；
函数myFunction（事件）{
如果（ctrlPressed==true）{
如果（event.wheeldta>0）{
放大（1.03）；
}否则如果（event.wheeldta<0）{
放大（1/1.03）；
}
}
}
函数缩放（因子）{
var scale=zoom.scale（），
extent=zoom.scaleExtent（），
translate=zoom.translate（），
x=平移[0]，
y=翻译[1]，
目标_比例=比例*系数；
//如果我们已经达到了一定程度，就完成了
如果（目标_标度===范围[0]| |目标_标度===范围[1]）{
返回false；
}
//如果该系数太大，则将其缩小到精确的范围
var钳制_目标_比例=Math.max（范围[0]，Math.min（范围[1]，目标_比例））；
if（夹紧的目标刻度！=目标刻度）{
target\u scale=夹紧的\u target\u scale；
系数=目标量表/量表；
}
//将每个向量居中，拉伸，然后放回原位
x=（x-中心[0]）*因子+中心[0]；
y=（y-中心[1]）*因子+中心[1]；
//立即执行缩放
缩放比例（目标缩放比例）
.翻译（[x，y]）；
缩放（）；
}
//运行渲染器。这就是绘制最终图表的原因。
渲染（内部，g）；
//将图表居中
var initialScale=1.0；
zoom.translate（[（svg.attr（“width”）-g.graph（）.width*initialScale）/2,20]）
.刻度（初始刻度）
.事件（svg）；
svg.attr（“高度”，g.graph（）.height*initialScale+40）；

几周前我也遇到了同样的问题。但我用的是dagreD3。我使用的函数来自D3。这是我的工作小提琴

//创建新的有向图
var g=new dagreD3.graphlib.Graph（）.setGraph（{}）
.setDefaultEdgeLabel（函数（）{
返回{}；
});
//使用strg+鼠标滚轮禁用浏览器缩放
$（文档）.keydown（函数（事件）{
如果（event.ctrlKey==true&&（event.which='61'| | event.which='107'| | event.which='173'| | event.which='109'| | event.which='187'| | event.which='189'））{
警报（“禁用缩放”）；
event.preventDefault（）；
}
});
$（窗口）.bind（'mousewheel-DOMMouseScroll'，函数（事件）{
如果（event.ctrlKey==true）{
event.preventDefault（）；
}
});
//检查是否按下了strg
var ctrlPressed=假；
$（窗口）.keydown（函数（evt）{
如果（evt.which==17）{
ctrlPressed=真；
控制台日志（“按下”）；
}
}).keyup（功能（evt）{
如果（evt.which==17）{
ctrlPressed=false；
控制台日志（“未按下”）；
}
});
//添加节点和边
g、 setNode（0{
标签：“顶部”，
});
g、 集合节点（1{
标签：“S”，
});
g、 集合节点（2{
标签：“NP”，
});
g、 集合节点（3{
标签：“DT”，
});
g、 集合节点（4{
标签：“这个”，
});
g、 集合节点（5{
标签：“VP”，
});
g、 集合节点（6{
标签：“VBZ”，
});
g、 集合节点（7{
标签：“是”，
});
g、 集合节点（8{
标签：“NP”，
});
g、 集合节点（9{
标签：“DT”，
});
g、 集合节点（10{
标签：“安”，
});
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({})
  .setDefaultEdgeLabel(function() {
    return {};
  });
// Disable Browserzoom with strg + mousewheel
$(document).keydown(function(event) {
  if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
    alert('disabling zooming');
    event.preventDefault();
  }
});

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.ctrlKey == true) {
    event.preventDefault();
  }
});

// Check if strg is pressed
var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = true;
    console.log("pressed");
  }
}).keyup(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = false;
    console.log("not pressed");
  }
});

//adding nodes and edges

g.setNode(0, {
  label: "TOP",
});
g.setNode(1, {
  label: "S",
});
g.setNode(2, {
  label: "NP",
});
g.setNode(3, {
  label: "DT",
});
g.setNode(4, {
  label: "This",
});
g.setNode(5, {
  label: "VP",
});
g.setNode(6, {
  label: "VBZ",
});
g.setNode(7, {
  label: "is",
});
g.setNode(8, {
  label: "NP",
});
g.setNode(9, {
  label: "DT",
});
g.setNode(10, {
  label: "an",
});
g.setNode(11, {
  label: "NN",
});
g.setNode(12, {
  label: "example",
});
g.setNode(13, {
  label: ".",
});
g.setNode(14, {
  label: "sentence",
});

g.setEdge(3, 4);
g.setEdge(2, 3);
g.setEdge(1, 2);
g.setEdge(6, 7);
g.setEdge(5, 6);
g.setEdge(9, 10);
g.setEdge(8, 9);
g.setEdge(11, 12);
g.setEdge(8, 11);
g.setEdge(5, 8);
g.setEdge(1, 5);
g.setEdge(13, 14);
g.setEdge(1, 13);
g.setEdge(0, 1);

// Round the corners of the nodes
g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.rx = node.ry = 5;
});

//makes the lines smooth
g.edges().forEach(function(e) {
  var edge = g.edge(e.v, e.w);
  edge.lineInterpolate = 'basis';
});

// Create the renderer
var render = new dagreD3.render();
var width = 500,
  height = 1000,
  center = [width / 2, height / 2];
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
  inner = svg.append("g");
var zoom = d3.behavior.zoom()
  .on("zoom", zoomed);

function zoomed() {
  inner.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
}
svg.call(zoom)
svg.on("wheel.zoom", null);
svg.on("dblclick.zoom", null);
svg.call(zoom.event);
document.getElementById("container").addEventListener("wheel", myFunction);

function myFunction(event) {
  if (ctrlPressed == true) {
    if (event.wheelDelta > 0) {
      zoom_by(1.03);
    } else if (event.wheelDelta < 0) {
      zoom_by(1 / 1.03);
    }
  }
}

function zoom_by(factor) {
  var scale = zoom.scale(),
    extent = zoom.scaleExtent(),
    translate = zoom.translate(),
    x = translate[0],
    y = translate[1],
    target_scale = scale * factor;

  // If we're already at an extent, done
  if (target_scale === extent[0] || target_scale === extent[1]) {
    return false;
  }
  // If the factor is too much, scale it down to reach the extent exactly
  var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
  if (clamped_target_scale != target_scale) {
    target_scale = clamped_target_scale;
    factor = target_scale / scale;
  }

  // Center each vector, stretch, then put back
  x = (x - center[0]) * factor + center[0];
  y = (y - center[1]) * factor + center[1];

  // Enact the zoom immediately
  zoom.scale(target_scale)
    .translate([x, y]);
  zoomed();
}
// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 1.0;
zoom.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
svg.attr("height", g.graph().height * initialScale + 40);

    svg.call(zoom) // zoom disable
                .on("wheel.zoom", null)
                .on("mousedown.zoom", null)
                .on("touchstart.zoom", null)
                .on("touchmove.zoom", null)
                .on("touchend.zoom", null);

this.zoom = d3.zoom()[...]

var svg = d3.select(this.$refs.chart)
             .call(this.zoom);

var wheeled = svg.on("wheel.zoom");

svg
    .on("wheel.zoom", function () {
        if (d3.event.ctrlKey) {
            wheeled.call(this);
            // prevent browser zooming at minimum zoom
            d3.event.preventDefault();
            d3.event.stopImmediatePropagation();
        }
    });

const maxScale=4;
var zoomListener = d3
  .zoom()
  .scaleExtent([0.1, maxScale])
  .on("zoom", zoom);

var svgContainer=d3.select("#container").call(zoomListener);
var svgGroup=svgContainer.append("g")
var wheeled = svgContainer.on("wheel.zoom");
 
svgContainer
  .on("wheel.zoom", null)

window.onkeydown = listenToTheKey;
window.onkeyup = listenToKeyUp;

function listenToTheKey(event) {
  if (event.ctrlKey) svgContainer.on("wheel.zoom", wheeled);
}
function listenToKeyUp() {
  svgContainer.on("wheel.zoom", null);
}
function zoom(event) {
  svgGroup.attr("transform", event.transform.toString()); 
}