javascript - 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") 这样即使内部未填充，也可以处理点击事件