如何在chrome中停止d3.drag触发mouseover / mouseout事件

Question

我有以下d3可视化。顶部较暗的颜色表示已选择节点。当鼠标悬停在非选定节点上时，它会更改不透明度，以便用户可以查看单击时将选择哪个节点。

这是通过CSS样式表和以下js / d3：

实现的

nodeSelection.select("circle").on('mouseover', function(e) {
             d3.select(this).classed("hover", true);
            _this.fireDataEvent("mouseOverNode", this);
        });

        nodeSelection.select("circle").on('mouseout', function(e) {
            d3.select(this).classed("hover", false);
            _this.fireDataEvent("mouseOutNode", this);
        });

所以，远，那么好。但是，当我拖动时，拖动功能似乎在我不拖动的节点上随机触发鼠标悬停和鼠标移出事件。这会导致节点不透明度闪烁。如果我在chrome中查看开发工具，我可以看到这是因为它导致节点获得类“悬停”。上面添加此CSS类的代码在其他任何地方都没有出现，并且通过使用控制台日志记录，我已经确认正在触发mouseover和mouseout事件。这些节点通常远离光标。

Firefox中不会出现此问题。

Answer 1

更新：我实际上在发布此内容后立即解决了这个问题。我只是在拖动开始时显式取消注册侦听器，并在拖动结束时重新注册。如果他们遇到类似的问题，对某些人来说可能仍然很有趣。

我的拖动功能现在看起来像：

var drag = d3.behavior.drag()
            .on("dragstart", function(d) {
                console.log("dragstart");
                d.dragstart = d3.mouse(this); // store this
                d.fixedbeforedrag = d.fixed;
                d.fixed=true;

                // deregister listeners
                nodeSelection.select("circle").on("mouseover", null).on("mouseout", null); 
            })
            .on("drag", function(d) {
                d.px = d.x; // previous x
                d.py = d.y;
                var m = d3.mouse(this);
                d.x += m[0] - d.dragstart[0];
                d.y += m[1] - d.dragstart[1];
                nodeSelection.attr("transform", "translate(" + [d.x, d.y] + ")");
                _this.getForce().start();
            })
            .on("dragend", function(d) {
                console.log("dragend");
                delete d.dragstart;
                d.fixed = d.fixedbeforedrag;
                //reregisters listeners
                _this.updateSVG(); 
            });