d3 tooltip is not working properly

Question

I am facing problem in tooltip function. I have tried to figure out the solution, but the solution is not working. The problem and expectation are stated below:

Problem

i) when i mouse over the graph, the tip only shows value for agv mileage but not showing value for timestamp

ii) when i mouse out the graph, the tip wont be disappearing, it still remain on the graph

iii) when i mouse out around the area of graph, the whole graph disappeared.

Expectation

i) when i mouse over the graph, the tip shows something like :

Timestamp : value

AGV_Mileage : value

ii) when i mouse out the graph, the tip disappear and the whole graph still remain there.

Why?

Please enlighten me on this, thanks in advance.

Here is the plunker : https://plnkr.co/edit/kV4zDLiXXu2fllmNpYfe?p=preview

Answer 1

Try this code

i) To show tool-tip :

focus.select("text.label")
    .attr("x", x(d.Timestamp))
    .attr("y", y(d.AGV_Mileage)-20)
    .attr('dy', -2)
    .attr("text-anchor", "middle")
    .text(function() { return "Timestamp :"+ d.Timestamp })
    .append('text:tspan')
    .attr("x", x(d.Timestamp))
    .attr("y", y(d.AGV_Mileage)-20)
    .attr('dy', 12)
    .text(function() { return "AGV_Mileage :"+ d.AGV_Mileage; });

ii) To make tool-tip disappear and the whole graph still remain there.

.on("mouseout", function() { 
    focus.select("text.label").style("display","none");
    focus.selectAll("circle.y").style("display","none");
 })

DEMO