D3.js：使用元素位置而不是鼠标位置定位工具提示？
[英]D3.js: Position tooltips using element position, not mouse position?
问题描述
I'm using D3 to draw a scatter graph.
我正在使用 D3 绘制散点图。 I would like to show tooltips when the user mouses over each circle.当用户将鼠标悬停在每个圆圈上时，我想显示工具提示。
My problem is that I can append tooltips, but they're positioned using the mouse event d3.event.pageX and d3.event.pageY , so they are not positioned consistently over each circle.我的问题是我可以附加工具提示，但它们是使用鼠标事件d3.event.pageX和d3.event.pageY ，因此它们在每个圆圈上的位置不一致。
Instead, some are slightly to the left of the circle, some to the right - it depends on how the user's mouse enters the circle.相反，有些在圆圈的左侧，有些在右侧 - 这取决于用户的鼠标如何进入圆圈。
This is my code:这是我的代码：
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);
});
And is a JSFiddle showing the problem: http://jsfiddle.net/WLYUY/5/并且是一个显示问题的 JSFiddle： http : //jsfiddle.net/WLYUY/5/
Is there some way I can use the centre of the circle itself as the position to orient the tooltip, not the mouse position?有什么方法可以使用圆心本身作为定位工具提示的位置，而不是鼠标位置？
4 个解决方案
解决方案1
31 已采纳 2013-04-27 20:55:24
In your particular case you can simply use d to position the tooltip, ie在您的特定情况下，您可以简单地使用d来定位工具提示，即
tooltip.html(d)
.style("left", d + "px")
.style("top", d + "px");
To make this a bit more general, you can select the element that is being moused over and get its coordinates to position the tooltip, ie为了使这更通用，您可以选择正在鼠标悬停的元素并获取其坐标以定位工具提示，即
tooltip.html(d)
.style("left", d3.select(this).attr("cx") + "px")
.style("top", d3.select(this).attr("cy") + "px");
解决方案2
19 2014-06-04 15:48:57
Found something here that might address your problem even if <body> and <svg> have different positioning.即使<body>和<svg>具有不同的定位，也可以在这里找到一些可以解决您的问题的内容。 This is assuming you have absolute position set for your tooltip.这是假设您为工具提示设置了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");
})
解决方案3
3 2020-03-01 05:59:43
In my experience, the easist solution is as follows:根据我的经验，简单的解决方案如下：
First, getBoundingClientRect() to get the position of your element.首先， getBoundingClientRect()获取元素的位置。
Then, use window.pageYOffset to adjust the height, relative to where you are.然后，使用window.pageYOffset相对于您所在的位置调整高度。
Eg例如
.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`);
})
In the example above, I don't use X's offset because we rarely need to (unless you're scrolling horizontally).在上面的例子中，我没有使用 X 的偏移量，因为我们很少需要（除非你水平滚动）。
Adding window.pageYOffset and pos['y'] gives us the current mouse position (wherever we are on the page).添加window.pageYOffset和pos['y']为我们提供当前鼠标位置（无论我们在页面上的哪个位置）。 I subtract 100 to place the tooltip a little above it.我减去 100 将工具提示放在它上面一点。
解决方案4
0 2016-02-07 00:36:10
I'm new to D3 so this may not work for scatterplots... but found it seems to work for Bar charts... where v1 and v2 are the values being plotted.. and it seems to look up the value from the data array.我是 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");})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.