Javascript d3单击处理程序在传单贴图层上不工作

晚上好

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

到目前为止，您可以看到该文件：

在传单.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); 
     }

以及：

当单击功能注册到控制台时，我不清楚为什么鼠标悬停功能不改变点的样式。我还希望看到指向更改的指针，但事实并非如此

请原谅我对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}]

---

问题是样式属性对于svg元素无效。 试试看

或者

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

或者

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

---

问题是样式属性对于svg元素无效。 试试看

或者

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

或者

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

---

如果您使用的是传单1.0，我认为原因是传单已将指针事件设置为无：

这使得单击事件无法激发。所以解决方案很简单，只要使用css将指针事件设置为all，就可以了！我用传单1.0试过了

指针事件：

---

如果您使用的是传单1.0，我认为原因是传单已将指针事件设置为无：

这使得单击事件无法激发。所以解决方案很简单，只要使用css将指针事件设置为all，就可以了！我用传单1.0试过了

指针事件：

---

在JSBin中，d3.json处理程序中的集合为null，可能是因为JSBin找不到目标json。用这个bug进一步诊断有点困难。您能否将代码简化为一个较小的示例，说明您所面临的具体且可重复的问题？您需要检查svg对象的有效样式属性是什么。尝试笔划和填充。为什么您希望指针会改变？@benjarwar我无法确定如何将示例JSON硬编码到JSBIN中，以便它能够运行。相反，我在问题中添加了一个JSON示例。我希望这能有所帮助？@CoolBlue我从一个Udacity教程中获取了样式属性，该教程提供了添加事件的框架。我怀疑我对指针的更改太天真了-我认为当“鼠标悬停”被触发时，这可能是对象之间的自然交互。@elksie5000，你的观点是什么？svg对象没有背景或颜色样式。毫无疑问，您从中复制代码的教程讨论的是按钮或其他HTML对象，而不是svg……在您的JSBin中，d3.json处理程序中的集合为null，可能是因为JSBin找不到目标json。用这个bug进一步诊断有点困难。您能否将代码简化为一个较小的示例，说明您所面临的具体且可重复的问题？您需要检查svg对象的有效样式属性是什么。尝试笔划和填充。为什么您希望指针会改变？@benjarwar我无法确定如何将示例JSON硬编码到JSBIN中，以便它能够运行。相反，我在问题中添加了一个JSON示例。我希望这能有所帮助？@CoolBlue我从一个Udacity教程中获取了样式属性，该教程提供了添加事件的框架。我怀疑我对指针的更改太天真了-我认为当“鼠标悬停”被触发时，这可能是对象之间的自然交互。@elksie5000，你的观点是什么？svg对象没有背景或颜色样式。毫无疑问，您复制代码的教程讨论的是按钮或其他HTML对象，而不是svg…另一个相关链接：另一个相关链接：