Javascript 使用d3和d3.tip计算div元素的坐标

我希望使用

d3-tip

的工具提示动态放置在我用此代码写出的文本旁边：

在Javascript中

$(".intro h2").html("Nextbus prediction of " + "<font size=5>" + cutoff + "</font>" + "minutes really means:")
.on('mouseover', tip2.show)
.on('mouseout', tip2.hide);

但是，当我取出

样式（“left”，300+“px”）

时，无论我如何尝试对其进行

偏移，文本都会放在图形的左下角。

我想将300替换为我用鼠标悬停的

div

的坐标

---

这是我的提琴：（不管没有出现的情节……这只是在从我的代码到JSFIDLE的翻译中丢失的，对于这个问题来说应该不是必需的）

这不使用d3.tip，但我认为它可以满足您对纯ol d3的需求，它可以生成一个div，您可以将HTML或文本放到鼠标所在的弹出窗口中：

var div = d3.select("body").append("div")   // put the tooltip in a separate div
      .attr("class", "tooltip");

然后

d3.选择全部（“.your_class”）
.on（“鼠标悬停”，功能（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，0.9）；
div.html（d.whatever++“etc”）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；}）
.开启（“鼠标出”，功能（d）{
过渡部（）
.持续时间（300）
.style（“不透明度”，0）
});

我认为

d3.tip

只适用于SVG。

 var tip2 = d3.tip()
        .attr('class', 'd3-tip')
        .direction("s")
        .html(function(d) {
            return "this my text for the hover over of the sentence!"
        })
        .style("left", 300+"px")
        .style("top", 150+"px")

var div = d3.select("body").append("div")   // put the tooltip in a separate div
      .attr("class", "tooltip");

d3.selectAll(".your_class")
    .on("mouseover", function (d) {
      div.transition()
        .duration(200)
        .style("opacity", 0.9);
     div.html( d.whatever + <somehtml> + "etc")
        .style("left", (d3.event.pageX) + "px")     
        .style("top", (d3.event.pageY - 28) + "px"); })
    .on("mouseout", function (d) {
      div.transition()
        .duration(300)
        .style("opacity", 0)
    });