如何在多个层中捕获鼠标事件?

时间:2015-01-27 05:11:38

标签: javascript d3.js pointer-events

现在我正在努力解决一个问题。请看下面显示的代码,我想实现两个函数,一个是放大容器(即缩放容器中的所有节点),第二个是提醒容器中节点的id,当鼠标结束了。

但是,当我将rect的“pointer-event”的值设置为all时,缩放很好,但是节点无法捕获mouseover事件。当我将值设置为“none”时,节点可以捕获鼠标悬停事件,但缩放不起作用。似乎“节点”和“矩形”位于不同的层中,因此无法同时捕获事件。

有谁知道如何解决这个问题?提前谢谢。

    var zoom = d3.behavior.zoom()
        .scaleExtent([0.1, 10])
        .on("zoom", zoomed);
    function zoomed() {
        container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
    }

    var container = svg.append("g");
    var rect = svg.append("rect")
        .attr("width", width/2)
        .attr("height", height)
        .style("fill", "none")
        .style("pointer-events", "all")
        .call(zoom);
    var node = container.append("g")
        .attr("class", "nodes")
        .selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("id",function(d){return d.userID});
    node.on("mouseover", function(d) {      
        alert(d.userID);
    });        

1 个答案:

答案 0 :(得分:2)

问题是,您要在背景矩形之前附加容器div。在这种情况下,鼠标事件的目标将是矩形,因为容器组和节点位于该元素下面。试试这段代码。

var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 10])
    .on("zoom", zoomed);

function zoomed() {
    container.attr("transform", "translate(" + d3.event.translate +")scale(" + d3.event.scale +")");
}

var rect = svg.append("rect") //Append background rect first
    .attr("width", width/2)
    .attr("height", height)
    .style("fill", "none")    
    .style("pointer-events", "all")    
    .call(zoom);

var container = svg.append("g"); //Then append the container group

var node = container.append("g")
    .attr("class", "nodes")
    .selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("id",function(d){return d.userID});

node.on("mouseover", function(d) {      
    alert(d.userID);
});