CODEWITHSUNDEEP
javascriptjqueryd3.js
Weedoze
Weedoze

Reputation: 13943

D3js click inside polygon

I am drawing a simple polygon and I want to show a sort of tooltip with data when the user clicks inside the polygon

CODE

poly = [{"x":0.0, "y":25.0},
        {"x":28.5,"y":23.4},
        {"x":33.0,"y":21.0},
        {"x":39.0,"y":1.5}];

  svg.selectAll("polygon")
    .data([poly])
    .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) {
            return [scaleX(d.x),scaleY(d.y)].join(",");
        }).join(" ");
    })
    .attr("stroke","white")
    .attr("stroke-width",1)
    .attr("fill", "none")
    .attr("class", "feature")
    .on("click", function(d){ alert("HEO"); });

The click function is only called when clicking on one of the 4 points that defines the polygon. How can I detect a click inside the polygon ?

Upvotes: 1

Views: 434

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

Set the pointer-events property to visible i.e. .attr("pointer-events", "visible") so that click events are processed even if the interior is not filled

Upvotes: 2

Related Questions