javascript - d3 单击处理程序不适用于传单 map 层

Question

晚上好。

我已将一系列 d3 点添加到传单 map ，然后想在这些点上使用点击处理程序来驱动另一个面板。但我似乎无法让处理程序接听。为什么？

到目前为止，您可以看到该文件: http://jsbin.com/bewudenide/edit?html,output

在 leaflet.js 的自定义图层上生成圆点的代码:

var feature = g.selectAll("circle")
            .data(collection)
            .enter().append("circle")
            .style("stroke", "black")  
            .style("opacity", .6) 
            .style("fill", "steelblue")
            .attr("r", 10); 

我认为为鼠标悬停和点击事件添加点击处理程序会很简单:

feature.on("click", click);
    function click(d) {
        console.log(d.name); 
     }

并且:

feature.on("mouseover", mouse_over);
function mouse_over(d) {
    d3.select(this) 
        .transition()
        .duration(500)
        .style("background", "lightBlue")
        .style("color", "white");
      }

虽然 click 函数注册到控制台，但我不清楚为什么 mouse_over 函数不改变点的样式。我也期待看到指针发生变化，但事实并非如此。

请原谅我缺乏使用 d3、javascript 或传单的经验。

编辑:

我现在意识到我没有添加现有代码使用的一些 JSON。看起来像

[{
"index":1,"name":"Adderley Green Surgery","total":276266.2700000001},{
    "index":2,"name":"Alton Surgery","total":416559.8999999998},{
        "index":3,"name":"Apsley Surgery","total":1023757.89999999998}]

Answer 1

如果您使用的是 leaflet 1.0，我认为原因是 leaflet 已将“pointer-event”设置为“none”: Figure showing SVG within leaflet

这使得点击事件无法触发。所以解决方案很简单，只需使用css将“pointer-event”设置为“all”即可!我已经使用 leaflet 1.0 尝试过了。

指针事件: pointer-events description