d3 单击处理程序不适用于传单地图层

Question

晚上好。

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

您目前可以看到的文件： 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");
      }

虽然点击功能注册到控制台，但我不清楚为什么 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

问题是样式属性对 svg 元素无效。
尝试...

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

或者……

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

或者……

feature.on("mouseover", mouse_over);
function mouse_over(d) {
    d3.select(this) 
        .transition()
        .duration(500)
        .attr({fill: "lightBlue", stroke: "white"});
      }

Answer 2

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

导致无法触发点击事件。所以解决方法很简单，用css把"pointer-event"设置成"all"就可以了！我已经使用 leaflet 1.0 尝试过了。

pointer-events: pointer-events description

d3 单击处理程序不适用于传单地图层

d3 click handler not working on leaflet map layer

javascript

d3.js

leaflet