d3js overlapping elements: how to "pass through" clicks to "lower" element?

Question

Using d3js, I draw some elements after/ on top of one another. Such as:

 // draw rectangle from dataset "d"
 svg.selectAll(".rect").append("rect")
            .attr("y", 10)
            .attr("x", 10)
            .attr("height", 5)
            .attr("width", 5)
            .on("click", function (d, i) {  
        // react on clicking
     });

  // slightly bigger frame overlapping first one
  var c=1.02;
  svg.append("rect")
                .attr("x", 10)
                .attr("y", 10)
                .attr("width", 5 * c)
                .attr("height", 5 * c)
                .attr("stroke", "blue")
                .attr("stroke-width", 1)
                .attr("fill-opacity", 0)

Obviosuly when second element is drawn overlapping first one, it is blocking the mouse events. I would like to bypass clicks, double-clicks and right clicks transparently through the second object. How I can do that?

Answer 1

The easiest way is to set the object to receive no pointer events:

svg.append("rect").attr("pointer-events", "none");