在鼠标悬停节点上显示自定义工具提示(强制定向d3图形)

问题描述 投票:0回答:1

我有一个样本力导向图像这样:http://next.plnkr.co/edit/C0n0GZvYpppWjx3R?preview

在此图中,我现在可以使用html的title属性在mouseover上显示节点名称。但这看起来并不乐观。

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

(我的项目已经有Clarity库)

但不知怎的,它不起作用......可能是我无法弄清楚如何在mouseover上附加愚蠢的html:

LOREM

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

我尝试的是:造型:

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");
       })

这是我更新的plunker:qazxsw poi工具提示不知何故无法正常工作。

javascript d3.js
1个回答
1
投票

你在做什么?正如@Lazar Nikolic所说,它的工作正常

http://next.plnkr.co/edit/C0n0GZvYpppWjx3R

你的数据是 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的功能 但是为什么name是formatTime你试图用随机而不是日期字符串转换日期?

如果你换到

formatTime

它会工作

定制你的qazxsw poi并添加qazxsw poi事件以在光标离开后隐藏它

© www.soinside.com 2019 - 2024. All rights reserved.