D3.js：使用元素位置而不是鼠标位置定位工具提示？
Posted
技术标签:
【中文标题】D3.js：使用元素位置而不是鼠标位置定位工具提示？【英文标题】：D3.js: Position tooltips using element position, not mouse position? 【发布时间】：2013-04-21 19:25:23 【问题描述】：我正在使用 D3 绘制散点图。当用户将鼠标悬停在每个圆圈上时，我想显示工具提示。
我的问题是我可以附加工具提示，但它们是使用鼠标事件 d3.event.pageX 和 d3.event.pageY 定位的，因此它们在每个圆圈上的定位不一致。
相反，有些在圆圈的左侧，有些在右侧 - 这取决于用户的鼠标如何进入圆圈。
这是我的代码：
circles
.on("mouseover", function(d)
tooltip.html(d)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
)
.on("mouseout", function(d)
tooltip.transition().duration(500).style("opacity", 0);
);
并且是一个显示问题的 JSFiddle：http://jsfiddle.net/WLYUY/5/
有什么方法可以使用圆心本身作为定位工具提示的位置，而不是鼠标位置？
【问题讨论】：
如果您对任何类型的工具提示都满意，this answer 应该会有所帮助。 谢谢！如果可能的话，我更喜欢使用纯 D3 工具提示而不是醉意。 【参考方案1】：根据我的经验，简单的解决方案如下：
首先，getBoundingClientRect() 获取元素的位置。
然后，使用window.pageYOffset 调整相对于您所在位置的高度。
例如
.on('mouseover', function(d)
let pos = d3.select(this).node().getBoundingClientRect();
d3.select('#tooltip')
.style('left', `$pos['x']px`)
.style('top', `$(window.pageYOffset + pos['y'] - 100)px`);
)
在上面的例子中，我没有使用 X 的偏移量，因为我们很少需要（除非你水平滚动）。
添加window.pageYOffset 和pos['y'] 为我们提供当前鼠标位置（无论我们在页面上的哪个位置）。我减去 100 以将工具提示置于其上方。
【讨论】：
【参考方案2】：我是 D3 的新手，所以这可能不适用于散点图...但发现它似乎适用于条形图...其中 v1 和 v2 是正在绘制的值.. 它似乎在查找值来自数据数组。
.on("mouseover", function(d)
divt .transition()
.duration(200)
.style("opacity", .9);
divt .html(d.v1)
.style("left", x(d.v2)+50 + "px")
.style("top",y(d.v1)+ "px");)
【讨论】：
【参考方案3】：找到了一些 here 可能解决您的问题的东西，即使 <body> 和 <svg> 有不同的定位。这是假设您为工具提示设置了absolute 位置。
.on("mouseover", function(d)
var matrix = this.getScreenCTM()
.translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
tooltip.html(d)
.style("left", (window.pageXOffset + matrix.e + 15) + "px")
.style("top", (window.pageYOffset + matrix.f - 30) + "px");
)
【讨论】：
正是我所需要的。谢谢！ 接受的解决方案与您的添加不完整。【参考方案4】：在您的特定情况下，您可以简单地使用d 来定位工具提示，即
tooltip.html(d)
.style("left", d + "px")
.style("top", d + "px");
为了更通用一点，您可以选择被鼠标悬停的元素并获取其坐标来定位工具提示，即
tooltip.html(d)
.style("left", d3.select(this).attr("cx") + "px")
.style("top", d3.select(this).attr("cy") + "px");
【讨论】：
谢谢 - 恐怕只有在<body> 和 <svg> 元素具有相同的位置时才可以使用 d3.select(this).attr("cx")。见jsfiddle.net/WLYUY/6
如果有其他内容，还得在位置加上SVG的偏移量，见jsfiddle.net/WLYUY/7
偏移解决方案对我有用。谢谢拉斯。现在我在引导列网格中使用可视化，但偏移不受新定位的影响。我该如何解决这个问题？
不确定，需要查看完整示例。您可能想就此提出一个单独的问题。
我想出了这个：var matrix = this.getScreenCTM().translate(+this.getAttribute("cx"),+this.getAttribute("cy"));tip .style("left", (window.pageXOffset + matrix.e) + "px").style("top", (window.pageYOffset + matrix.f + 30) + "px");
以上是关于D3.js：使用元素位置而不是鼠标位置定位工具提示？的主要内容，如果未能解决你的问题，请参考以下文章