CODEWITHSUNDEEP
javascriptjqueryd3.js
sanyooh
sanyooh

Reputation: 1631

Make jQuery mousemove stop

At the moment the overlay div is always showing up. But I only want it to show up when the mouse is passing a value in the chart. The method d3.event.pageX and d3.event.pageY will not work. The code is just a snippet of a greater page and somehow the positions of the mouse are not tracked when using the d3 methods.

Here is a fiddle of the code: http://jsfiddle.net/9z6nmwff/

Here is a snippet of the code:

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

How can I do this?

Edit: Here is the code for my current solution. Thank you for your help!

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

Upvotes: 0

Views: 291

Answers (1)

Quince
Quince

Reputation: 14990

you can use the mouseleave to do the hiding and let the mouseenter do the showing similar to you are doing now

  // 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/

Upvotes: 1

Related Questions