javascript - 3d.js (Force) - 获取工具提示链接上的当前鼠标位置

Question

我试图在鼠标悬停时启用工具提示。这是我当前的设置:

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 和 Internet 上可以找到的所有方案。我确实得到了 X/Y 鼠标的值，但它们总是错误的。我还尝试使用 Jquery 事件附加鼠标悬停链接，但这些值也是错误的。

如果有另一种方式在链接上显示工具提示，我会更高兴。

Answer 1

由于您没有提供工作 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 .

将鼠标悬停在链接上以查看工具提示。