Question

我在工具提示功能方面遇到问题。我试图弄清楚解决方案，但解决方案无效。问题和期望如下：

问题

i）当我将鼠标悬停在图表上时，提示仅显示agv里程的值，但是没有显示时间戳的值

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

iii）当我在图表区域外鼠标时，整个图表消失了。

期望

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

时间戳：值

AGV_Mileage：值

ii）当我将鼠标移出图表时，提示消失，整个图表仍然存在留在那里。

为什么呢？

请提前通知我。

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

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

d3工具提示无法正常工作

1 个答案: