d3 防止在上下文菜单上触发 mouseout

Question

我在 extjs 面板中创建了一个 SVG。当我右键单击 SVG 元素时，也会触发鼠标悬停事件，这会更改 SVG，但我希望 SVG 元素与右键单击之前一样。这样我就可以将以前的 SVG 导出到图像而不是更改后的 SVG。

这是我的示例代码：

var path = this.svg.selectAll("path")
        .data(partition.nodes(dataset))
        .enter().append("path")
        .attr("d", arc)
        .style("stroke","#fff")
        .style("stroke-width","1px")        
        .attr("fill-rule", "evenodd")
        .style("fill", function(d) { 
            return d.parent? getCurrColor(d) : "#FFFFFF"; 
        })
        .on("click", click)
        .on("mouseover", function(d) { return mouseover(d, this);})
        .on("mousemove", function(d) { return mousemove(d, this);})
        .on("mouseout", function(d){ return mouseout(d, this);});

在面板正文的上下文菜单中，这是代码：

this.body.on('contextmenu', this.optionsMenu,this);

optionsMenu:function{
    var me = this;
    var xyArr = eventObject.getXY();
    eventObject.stopEvent();
    eventObject.preventDefault();
    var menuItems=[];

    var emailItem = {
            text:'Save as image',
            scope:this,
            handler:function(){
                //save as image
            },          
    };

    menuItems.push(emailItem);

   var menu = new Ext.menu.Menu({
                items : menuItems
    });     

        menu.showAt(eventObject.getXY());
}

Answer 1

当您在右键单击事件的 XY 位置创建上下文菜单时，鼠标指针指向新菜单项。这会导致 SVG 的 mouseout 事件。

所以这个问题的解决方案是使用 mouseenter 和 mouseleave 听众而不是 mouseover 和 mouseout 听众。

d3 防止在上下文菜单上触发 mouseout

d3 prevent firing of mouseout on contextmenu

javascript

svg

extjs

dom-events

d3.js