Question

此时叠加div总是显示出来。但我只希望它在鼠标传递图表中的值时显示。方法d3.event.pageX和d3.event.pageY将不起作用。代码只是一个更大页面的片段，并且在使用d3方法时，不会以某种方式跟踪鼠标的位置。

以下是代码片段：

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

小提琴http://fiddle.jshell.net/leighking2/277yknrs/

让jQuery mousemove停止

1 个答案: