CODEWITHSUNDEEP
javascriptd3.js
user7441730
user7441730

Reputation:

D3 line graph mouseover issue

I am trying on the d3 mouseover function on the graph to display the text value of timestamp and agv mileage but the circle keep sticking on top of y-axis and the graph will disappear when the mouse arrow pointed to inside and outside the area of graph.

The code and output of the mouseover function are presented here Plunker

Anyone can guide me on this? your help will be much appreciated. Thanks in advance.

Upvotes: 1

Views: 465

Answers (1)

Daniela Mogini
Daniela Mogini

Reputation: 539

You have to define the bisectDate function and set the cx and cy attributes of the circle to make it move.

var bisectDate = d3.bisector(function(d) { return d.Timestamp; }).right;
function mousemove() {  


    var x0 = x.invert(d3.mouse(focus.node())[0]),              
        i = bisectDate(dataset, x0, 1),                   
        d0 = dataset[i - 1],                              
        d1 = dataset[i];

        var d = x0 - d0.Timestamp > d1.Timestamp - x0 ? d1 : d0;     

    focus.selectAll("circle.y")
        .attr("cx", x(d.Timestamp))
        .attr("cy", y(d.AGV_Mileage))


}

Edited your Plunker

Upvotes: 1

Related Questions