[英]Show a custom tooltip on mouseover of the node (force directed d3 graph)
我有一个样本力导向图,如下所示: http : //next.plnkr.co/edit/C0n0GZvYpppWjx3R?preview
在此图中,现在我可以使用html的title属性在鼠标悬停时显示节点名称。 但这看起来并不乐观。
所以,我试图在这里使用来自https://vmware.github.io/clarity/documentation/v0.11/tooltips的自定义工具提示库
(我的项目已经有Clarity库)
但以某种方式无法正常工作...可能是我无法弄清楚如何在mouseover上附加foolowing 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");
})
这是我更新的plunkr: http ://next.plnkr.co/edit/C0n0GZvYpppWjx3R工具提示无法正常工作。
你在做什么? 它工作正常,如@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
函数
但是为什么名称是formatTime,您是否要尝试随机转换日期而不是具有日期的字符串?
如果您更改为
div.html(d.id + "<br/>" + d.group)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
它会工作
custum您的mouseover
并添加mouseout
事件以在光标离开后将其隐藏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.