Question

我在d3中创建了SVG圈元素。

<circle cx="0" cy="0" r="50" id="tooltip_area" stroke-width="0.6" style="fill: none; stroke: white;"></circle>

我正在尝试在此圈子上创建鼠标悬停效果，但该事件永远不会被触发。

这是悬停代码 -

$('#tooltip_area').mouseover(function(event) {
  div.transition()
    .duration(200)
    .style("opacity", .9);
  div.html('Hi, This is Sample Text')
    .style("left", (event.pageX) + "px")
    .style("top", (event.pageY + 28) + "px");
});

我不确定为什么悬停代码没有被触发

Answer 1

我认为你应该使用

hover

悬停效果事件。以下是悬停事件如何工作的示例

$(".area").hover(function(){
    //This function executes when your mouse pointer enters the area.
    alert("You entered.");
},
function(){
    // This function executes when your mouse pointer leaves the area.
    alert("You left.");
});

Answer 2

我使用D3事件而不是jquery事件并且它有效。正如@ gerardo-furtado在评论中所建议的，混合jquery和D3绝不是一个好主意。

Jquery鼠标悬停回调不起作用

2 个答案: