Accepted answer

I discovered that the reason I was experiencing these jumps was that I needed to decrement the index whenever the mouse passed over the interface between the two x-values (in this case, two dates). Creating this i2 variable that adjusts for the transition fixed my tracking problem. The modified mousemove function is below:

function mousemove(thisChart,x0){
    var i = AC.bisectDate(thisChart.chartData, x0, 1),
        i2 = i,
        d0 = thisChart.chartData[i - 1],
        d1 = thisChart.chartData[i],
        d = x0 - > - x0 ? d1 : d0;

    if (x0 - <= - x0) {i2 = i-1;}

    var mydata = thisChart.chartData[i2][AC.props[]],
        yPos = thisChart.y(mydata),
        xPos = +thisChart.x( + +thisChart.margin.left;
    thisChart.focus.attr("transform","translate(" + xPos + "," + yPos + ")");"text").text(mydata);    

I'm not sure why I couldn't find this sort of if statement in other examples' code, while their tooltip alignment seemed fine. Maybe I have something strange in my code, or maybe their datasets are so densely packed you don't notice the awkward jump?


There is a possibility that you have not correctly returned the mouse position by omitting a line in your mousemove function.

If you re-check Mikes example you will see a line var x0 = x.invert(d3.mouse(this)[0]), which returns the x position on the screen of the mouse (d3.mouse(this)[1] would return the y position). The x.invert function reverses the process that is used to map the domain (date) to range (position on screen). So it takes the position on the screen and converts it into an equivalent date!

It is possible that you have included this somewhere else in your code, but I would check this first.

If you want another example to check out try this which explains an almost identical example.

Related Query

More Query from same tag