d3 mousedown 事件触发，但 mouseup 事件不触发

Question

我在 d3 中看到了一些奇怪的行为。我以通常的方式有一个力有向图

node = svg.selectAll(".node").data(graph.nodes).enter().append("circle")....

当有人点击一个节点时，我想要一个简单的动画（而不是 console.log）

function set_focus(d) { console.log('set'); }
function remove_focus() { console.log('remove'); }

node.on("mousedown", set_focus);
node.on("mouseup", remove_focus);

有趣的是，当我在节点上按下鼠标时，set 事件会触发，但是当我释放鼠标时，remove_focus 不会触发。有人知道发生了什么吗？

---

d3v5、chrome 65、macOS 10.13

Answer 1

tldr：缩放事件与您的 mouseup 事件冲突。

我创建了一个 fork，因为我不太确定您要对此做什么，而且我不想弄乱您的 git 历史记录：this link is the fork。

单击鼠标后，您在 SVG 上的 Zoom 事件似乎正在“消耗”所有其他事件。我的印象是，这是一个已知且普遍抱怨的问题。我认为这个GitHub ticket 是相关的，this one 也是如此。每迈克博斯托克，

这是预期的行为。根据发行说明：“变焦 行为现在消耗已处理的事件。”所以，如果 mouseup 事件是一部分 的缩放手势，然后缩放行为停止立即 该 mouseup 事件的传播阻止其他侦听器 接收它（并在可能的情况下阻止关联的浏览器 默认行为）。这使得结合缩放和 如本例所示拖动：

http://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084

如果您想阻止缩放手势启动，请使用 zoom.filter 忽略某些事件，或使用 event.stopPropagation 或 event.stopImmediatePropagation 以防止缩放行为 接收启动事件。如果你想在之后做某事 缩放手势，监听缩放事件。

我可以通过删除d3.zoom 事件或在set_focus 函数中调用d3.event.stopPropagation 来触发您的mouseup 事件。因此，下面的两行（以及在 fork 中）让您的 remove_focus 函数触发，但我不确定我是否也搞砸了您希望缩放事件如何工作：

function set_focus(d) {
    console.log('set');
    d3.event.stopPropagation();
    node.style("opacity", function(o) { return (d == o || o.layer == d.layer - 1) ? 1 : 0.1; });
    link.style("opacity", function(o) { return (o.target == d.id) ? 1 : 0.02; });
}

function remove_focus() {
    console.log('remove');
    d3.event.stopPropagation();
    node.style("opacity", 1);
    link.style("opacity", function () { return edgeOpacity; })
}

Answer 2

现在你有一个缩放事件结束的监听器see here

所以你可以做类似的事情

d3.zoom().on('end', remove_focus)