时间戳

首页 > 解决方案 > 在节点鼠标悬停时显示自定义工具提示（强制定向 d3 图）

javascript - 在节点鼠标悬停时显示自定义工具提示（强制定向 d3 图）

问题描述

我有一个样本力定向图是这样的： http ://next.plnkr.co/edit/C0n0GZvYpppWjx3R?preview

在此图中，现在我可以使用 html 的 title 属性在鼠标悬停时显示节点名称。但这看起来并不乐观。

所以，我试图在这里使用来自https://vmware.github.io/clarity/documentation/v0.11/tooltips的自定义工具提示库

（我的项目已经有 Clarity 库）

但不知何故它不起作用......可能是我无法弄清楚如何在鼠标悬停时附加愚蠢的html：

洛雷姆

我对其他一些自定义工具提示也很好......任何人都可以看到这个。

我尝试的是： 样式：

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

然后在鼠标悬停时：

.on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html(formatTime(d.id) + "<br/>" + d.close)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       })

这是我更新的 plunkr：http ://next.plnkr.co/edit/C0n0GZvYpppWjx3R 工具提示显示如何无法正常工作。

标签： javascriptd3.js

解决方案

你在做什么？正如@Lazar Nikolic 所说，它工作正常

   div.html(formatTime(d.id) + "<br/>" + d.close)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 28) + "px");
   })

你的数据是{ id : string, group: number }

没有带有名称的字段没有带有名称close
的函数formatTime

但是为什么名称是格式时间您是否尝试使用随机而不是可日期的字符串转换日期？

如果你改为

   div.html(d.id + "<br/>" + d.group)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 28) + "px");
   })

它会起作用的

自定义您的mouseover并添加mouseout事件以在光标离开后将其隐藏

推荐阅读