我试图在鼠标在线时启用工具提示。这是我当前的设置:
HTML:
<div id="graphContainer"></div>
<div id='hoveringTooltip' style='position:fixed;'></div>
3d.js 代码 - 基本设置:
var width = 1200,
height = 900;
var svg = d3.select("#graphContainer").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.charge(-120)
.linkDistance(80)
.size([width, height]);
//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (link) {
return link.thick
})
.attr("data-info", function (link) {
return link.info;
})
.style("marker-end", "url(#suit)")
.on("mouseover", mouseOverLink)
function mouseOverLink (e) {
//d3.select(this).style("stroke","red");
d3.select(this).attr("class", "link_selected");
var that = this;
var value = Number( this.attributes.x1.value );
var xx = d3.select(this).attr("cx") + "px"
var yy = d3.select(this).attr("cy") + "px"
var xxx = d3.event.pageX;
var yyy = d3.event.pageY;
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
var value = this.attributes[1].value;
$('#hoveringTooltip').show();
$('#hoveringTooltip').html(value);
$('#hoveringTooltip').css({
"top": xxx,
"left": yyy
});
}
在 mouseOverLink 函数中,我尝试了在 SO 和互联网上可以找到的所有场景。我确实得到了 X/Y 鼠标的值,但它们总是错误的。我还尝试使用 Jquery 事件附加鼠标悬停链接,但这些值也是错误的。
如果有其他方法可以在链接上显示工具提示,我会非常高兴。
最佳答案
由于您没有提供有效的 fiddle ,所以我做了一个强制引导的 Plunk 来解释解决方案。
首先为工具提示 div 指定样式,如下所示:
div.tooltip {
position: absolute;// because we are going to give the position.
text-align: center;
width: 160px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
接下来创建一个 div 并将其附加到正文,如下所示:
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);//so that its not visible initially
现在在链接鼠标悬停/鼠标移出时执行
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.on("mouseover", function (d, i) {//show tooltip
tooltip.transition()
.duration(200)
.style("opacity", 0.9);
tooltip.html("<p>source:"+d.source.name+ "</p><p>target:"+d.target.name+ "</p>")//tool tip html
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);//hde tooltip
})
工作示例 here .
将鼠标悬停在链接上可查看工具提示。
关于javascript - 3d.js(强制)- 获取工具提示链接上的当前鼠标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34765305/