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

当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

如果您使用的是传单1.0，我认为原因是传单设置了＆＃34;指针事件＆＃34; as＆＃34; none＆＃34;： Figure showing SVG within leaflet

这使得click事件无法触发。因此解决方案非常简单，只需设置＆＃34;指针事件＆＃34; as＆＃34; all＆＃34;通过使用CSS，然后它的工作原理！我已经尝试使用传单1.0。

指针事件： pointer-events description

Answer 2

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

d3单击处理程序不在传单地图图层

2 个答案: