event.pageX和event.pageY

Question

我有一个移动的<div>对象。我想显示/更新此tooltip info，请说每2s。它工作正常，但即使对象移动，位置也不会改变，tooltip保持初始位置并保持静止（抱歉，我没有提供一个工作示例）。

如何更新其位置以跟随<div>（而不是鼠标）？

Answer 1

event.pageX和event.pageY

以下说明适用于event.pageX 描述：相对于文档左边缘的鼠标位置。

以下是我在其中一个应用程序中使用的代码。

您可以在鼠标悬停事件中显示以下div。

date.selectAll("rect")
    .data(function(d) {
        return d.mattel_data;
    })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) {
        return y(d.y1);
    })
    .attr("height", function(d) {
        return y(d.y0) - y(d.y1);
    })
    .style("fill", function(d) {
        return color(d.name);
    })
    .on("mouseover", function(d) {
        div.transition()
            .duration(100)
            .style("opacity", .9);
            var hoverVal = (d.y1 - d.y0);
            var formatter = new Intl.NumberFormat('en-US',{
              style : 'currency',
              currency : 'USD',
              minimumFractionDigits : 2,
            });
            var pop = formatter.format(hoverVal);
            // console.log(pop);
            div.html("Value:" + pop + "<br/>" + d.name)
            .style("left", (d3.event.pageX - 140) + "px")
            .style("top", (d3.event.pageY - 80) + "px")
            .style('position', 'absolute')
            .style('font-size', '15px')
            .style('background', function() {
                return color(d.name);
            })
            .style('color', function() {
                return getContrastYIQ(color(d.name));
            })
    })
    .on("mouseout", function(d) {
        div.transition()
            .duration(200)
            .style("opacity", 0);
    });

看看这是否有助于你。此外，如果您在此处发布代码，将有助于更清楚地了解您的问题

如何更新移动对象的bootstrap（工具提示）？

1 个答案:

event.pageX和event.pageY