d3工具提示无法正常工作

Question

我在工具提示功能中遇到问题。 我试图找出解决方案，但是该解决方案无法正常工作。 问题和期望如下：

问题

i）当我将鼠标悬停在图表上时，提示仅显示avv里程的值，而不显示时间戳的值

ii）当我将鼠标移出图表时，笔尖不会消失，它仍然保留在图表上

iii）当我将鼠标移出图形区域时，整个图形消失了。

期望

i）当我将鼠标悬停在图表上时，提示显示如下：

时间戳记：值

AGV_Mileage：值

ii）当我将鼠标移出图形时，尖端消失，整个图形仍保留在那里。

为什么？

请对此有所启发，谢谢。

Here is the plunker ： https : Here is the plunker ? Here is the plunker = Here is the plunker

Answer 1

试试这个代码

i）显示工具提示：

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）使工具提示消失而整个图形仍保留在那里。

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

DEMO