javascript D3 和​​鼠标事件,单击测试不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14347685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:24:30  来源:igfitidea点击:

D3 and mouse events, click test not working

javascriptonclickd3.js

提问by CQM

I am not sure why my click method is not working. In this test I want to be able to click on one of the circle nodes on the graph and display its number. Hovering over works kind of.

我不确定为什么我的点击方法不起作用。在此测试中,我希望能够单击图形上的圆形节点之一并显示其编号。将鼠标悬停在作品上。

What library's click event am I using, D3? Jquery? normal JS?

我使用的是什么库的点击事件,D3?查询?普通JS?

ultimately I want to do tooltips when I hover over the nodes, and make them go away when I move the mouse away

最终我想在我将鼠标悬停在节点上时做工具提示,并在我将鼠标移开时让它们消失

http://jsfiddle.net/ericps/b5v4R/

http://jsfiddle.net/ericps/b5v4R/

dots.enter()
    .append("circle")
    //.append("svg:circle")
    .attr("class", "dot")
    .attr("cx", complete_line.x())
    .attr("cy", complete_line.y())
    .attr("r",3.5)
    .append("title")
    .text(function(d){ return d.completed;})
    .on("click", function(d) { alert("hello"); });

回答by nautat

You've attached the event handler to svg:text element. I think you want to attach it to the svg:circle element:

您已将事件处理程序附加到 svg:text 元素。我想你想把它附加到 svg:circle 元素:

dots.enter().append("circle")
    .attr("class", "dot")
    .attr("cx", complete_line.x())
    .attr("cy", complete_line.y())
    .attr("r",3.5)
    .on("click", function(d) { alert("hello"); })
  .append("title")
    .text(function(d){ return d.completed; });