javascript - 让 jQuery mousemove 停止

Question

目前，覆盖 div 始终显示。但我只希望它在鼠标传递图表中的值时显示。方法 d3.event.pageX 和 d3.event.pageY 将不起作用。该代码只是一个更大页面的片段，并且在使用 d3 方法时不知何故不会跟踪鼠标的位置。

这是代码的 fiddle :http://jsfiddle.net/9z6nmwff/

这是代码片段:

 //draw the scatterplot
 svg.selectAll("dot")                                    
  .data(data)                                            
  .enter().append("circle")                                
  .attr("r", 5)    
  .attr("cx", function(d) { return x(d.date); })         
  .attr("cy", function(d) { return y(d.open); })
   // Tooltip stuff after this
  .on("mouseover", function(d) {        

          //console.log("x: " + d.pageX + ", y: " + d3.event.pageY);
          $(document).mousemove(function(event){
            console.log("x: " + event.pageX + ", y: " + event.pageY);
          div.transition()
          .duration(200)    
          .style("opacity", 0);
          div.transition()
          .duration(200)    
          .style("opacity", .9); 
          div.html(formatTime(d.date) + "<BR>" +d.open)     
          .style("left", (event.pageX) + "px")             
          .style("top", (event.pageY ) + "px");
          //$("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
        });
      });

我该怎么做？

编辑: 这是我当前解决方案的代码。感谢您的帮助!

// Tooltip stuff after this
.on("mouseover", function (d) {

    $(document).ready(function(){
          $(".clearfix").mousemove(function(event){

        div.transition()
            .duration(200)
            .style("opacity", 0);
        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html(formatTime(d.date) + "<BR>" + d.open)
            .style("left", (event.pageX+3) + "px")
            .style("top", (event.pageY+3) + "px");
});
    $(".clearfix").mouseleave(function(){
        div.transition()
            .duration(200)
            .style("opacity", 0);
        }); 
    });
});

Answer 1

您可以使用mouseleave进行隐藏，并让mouseenter进行显示，与您现在所做的类似

  // Tooltip stuff after this
    .on("mouseover", function (d) {
            div.transition()
                .duration(200)
                .style("opacity", 0);
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.html(formatTime(d.date) + "<BR>" + d.open)
                .style("left", (event.pageX) + "px")
                .style("top", (event.pageY) + "px");

    }).on("mouseleave", function (d) {
          div.transition()
                .duration(200)
                .style("opacity", 0);
    });

fiddle http://fiddle.jshell.net/leighking2/277yknrs/