How to catch the mouse events in multiple layers?

Vote count:

0

Now I am struggling with one problem. Please have a look at the codes shown below, I want to implement two functions，one is zooming in the container(i.e. zooming all the nodes in the container), the second is to alert the id of the node in the container, when the mouse is over it.

But, when I set the value of "pointer-event" of rect to all, the zooming is fine but the nodes can't catch the mouseover event. When I set the value to "none", the nodes can catch the mouseover event but the zooming doesn't work. It seems that "nodes" and "container" are in different layers, thus can't catch the events at the same time.

Anybody knows how to fix this? Thanks in advance.

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

asked 23 secs ago

Maytree23

23

How to catch the mouse events in multiple layers?