D3js在多邊形內單擊

Question

我正在繪制一個簡單的多邊形，當用戶在多邊形內單擊時，我想顯示一種帶有數據的工具提示

碼

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

僅在單擊定義多邊形的4個點之一時才調用click函數。 如何檢測多邊形內部的點擊？

Answer 1

將pointer-events屬性設置為可見，即.attr("pointer-events", "visible")以便即使內部未填充也可以處理單擊事件