Javascript D3 v4-D3.zoom（）防止绑定除窗口外的某些事件

毫无帮助的Github让我在这里问了这个问题：

---

在更改为新的v4.0 D3之后，似乎要使用

D3.zoom（）

，例如：

称之为：

svg.call(d3.zoom()
     .scaleExtent([1, 40])
     .translateExtent([[-100, -100], [width + 90, height + 100]])
     .on("zoom", zoomed));

然后这个：

document.querySelector('svg').addEventListener('mouseup', function(){ alert(1) })

单击SVG上的任意位置时不会发出任何警报。

我真的不想做：

window.addEventListener("mouseup", function(e){
    if( [target or target parent is the specific SVG element] ){
        // do something
    }
}

因为这将在窗口上引入一个全局非名称空间事件

mouseup

（此技术似乎仅适用于

窗口

对象），并且此事件可能会在其他地方删除，或者多次发生。（封装起来并不容易，或者我根本不知道如何封装）

关于如何在SVG上捕获

mouseup

事件，有什么更好的想法吗

---

关于我的另一个问题：

---

更新：

---

借助于马克的回答，以下是我仍然不确定是否理解你的意图，但你可能从错误的角度来理解这一点。不要尝试添加自己的事件，只需在缩放行为提供的事件中工作即可。当鼠标向下开始平移（即缩放

start

事件）和鼠标向上结束平移（即缩放

end

事件）时，缩放功能提供平移功能。所以，真正的问题是，如何区分平移和“点击”鼠标？为此，只需检查用户是否移动了鼠标：

svg.call(d3.zoom()
         .scaleExtent([1, 40])
         .translateExtent([[-100, -100], [width + 90, height + 100]])
         .on("start", zoomstart)
         .on("end", zoomend)
         .on("zoom", zoomed));

var mousePos = null;
function zoomstart(){
  mousePos = d3.mouse(this);
}

function zoomend(){
  var m = d3.mouse(this);
  if (mousePos[0] ===  m[0] && mousePos[1] === m[1]){
    alert('mouseup');
  }
}

function zoomed() {
  svg.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}

---

更新。

您的最终目标是在

svg

或

圆圈上捕获
mouseup
，
svg
上的@Mark，这不就是缩放
结束
事件吗？@Mark-否。没有
缩放
功能触发器，请在演示页面中自己尝试。缩放

添加了平移事件，mousedown开始平移（即缩放

start

），mouseup结束平移（即缩放

end

）。如果您正在svg上启用平移，您可以通过检查用户是否移动了鼠标来确定这是鼠标悬停还是真正的平移。谢谢！我只需要绑定

end

事件并运行

if（d3.event.type=='end'）{[code for mouseup]}

。。谁会想到呢。D3与直观编程完全相反。