D3点击处理程序不工作在传单地图层

d3 click handler not working on leaflet map layer

本文关键字：单地 图层 工作 处理 程序 D3      更新时间：2023-09-26
晚上好。

我在传单地图上添加了一系列d3点，然后想在这些点上使用点击处理程序来驱动另一个面板。但我似乎没法让联络人接电话。为什么?

你可以看到到目前为止的文件:http://jsbin.com/bewudenide/edit?html,输出

在leaf .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}]

如果您使用的是传单1.0，我认为原因是传单将"pointer-event"设置为"none":图显示宣传单

中的SVG

使得click事件不能被触发。所以解决方案很简单，只需使用css将"pointer-event"设置为"all"，然后它就可以工作了!我用传单1.0试过了。

pointer-events:指针事件描述

问题是样式属性对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"});
      }
相关文章：