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?

Accepted Answer

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

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

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

Solution

Problem