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);

有趣的是，当我在一个节点上进行mousedown时，set事件会触发，但是当我释放鼠标时，remove_focus不会触发。任何人都知道发生了什么？

d3v5，chrome 65，macOS 10.13

Answer 1

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

我创建了一个分叉，因为我不太清楚你想要做什么，而且我不想搞砸你的git历史：this link is the fork。

似乎您在SVG上的缩放事件是＆＃34;消费＆＃34;单击鼠标后的所有其他事件。我的印象是，这是一个众所周知且常被抱怨的问题。我认为这GitHub ticket是相关的，this one也是如此。 Per Mike Bostock，

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

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

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

我可以通过删除mouseup事件或在d3.zoom功能中调用d3.event.stopPropagation来触发您的set_focus事件。所以，下面的两行（以及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)

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

2 个答案: