1

I have an on click event on my rectangles but in some places, I can't select them because other shapes overlapping them. I can identify all my shapes somehow, f.e. by ID, etc.

Can I somehow click trough shapes to select the underlying shape, like with attribute pointer-events = none for text? Or put my rectangles on top of everything else?

I append my paths from a single Geojson-file like this:

svgContainer.selectAll(null)
                    .data(feat.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    .attr("stroke", "black")
                    .attr("stroke-width", 0.1)
                    .attr("fill", "none")
                    .attr("PENr", function (d) {
                        return d.properties.Nr
                    })
                    .attr("myID", function (d) {
                        return d.properties.ID;
                    })
                    .style("pointer-events", "visible")
                    .on("click", click);
isherwood
  • 58,414
  • 16
  • 114
  • 157
BR75
  • 633
  • 7
  • 25
  • 3
    The problem is, if you put your rectangles above everything, it will display it on top (so other things will be hidden). A good way is to set **pointer-events: none;** to everything except rect which will be **fill** or whatever is the best for you. Doc: https://developer.mozilla.org/docs/Web/CSS/pointer-events – Elanis Apr 15 '19 at 12:54
  • pointer-events: none works perfectly, thanks. – BR75 Apr 15 '19 at 13:28

1 Answers1

-1

You can add onclick event to parent element and handle everything there. Property event.target references to element that actually fired event, if you need to know it.

Sergey Kirienko
  • 281
  • 3
  • 12