Question

我希望使用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);

HTML中的

...

<div class="intro">
    <span class="underline"><h2></h2></span>
</div>

当我使用style("left", 300+"px")

定义工具提示时，我可以将工具提示显示在绝对位置

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

但是，当我取出style("left", 300+"px")时，无论我试图破解多少offset.

，文字都会放在图表的左下角。

我希望将300替换为检索到我用鼠标悬停的div坐标的内容。

这是我的小提琴：http://jsfiddle.net/0yfbhtcv/1/（没关系那些没有出现的情节......从我的代码到jsfiddle的翻译失败了，不应该这样做这个问题是必要的）

Answer 1

这不使用d3.tip，但我认为它可以用普通的d3做你想要的，它会创建一个div，你可以将HTML或文本弹出到你的鼠标所在的位置：

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

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

1 个答案: