自定义工具提示定位

2022-01-21 00:00:00 plotly heatmap javascript

在 Plotly.js 热图上正确定位自定义工具提示时遇到问题.

I'm facing issues to properly position a custom tooltip on a Plotly.js heatmap.

我使用 l2p 方法(这个首字母缩写词代表什么?)结合 pointNumber 数据来获得热图中的相对定位.它看起来像:

I'm using the l2p method (what's this acronym standing for?) in combination with the pointNumber data to get a relative positioning within the heatmap. It looks like:

x: point.xaxis.l2p(point.pointNumber[1]),
y: point.yaxis.l2p(point.pointNumber[0])

但问题在于它相对于热图 svg 本身的顶部/左侧原点，没有外部 x 轴和 y 轴标签，所以我实际上错过了那部分，想知道是否有'直接获取此定位信息的内置功能?使用外部 div 作为工具提示区域的问题是它们完全位于图表之外，因此我需要参考图表外部的上/左原点和轴标签的信息.

But the problem with that is that it is relative to the top/left origin of the heatmap svg itself without the outer x- and y-axis labels, so I'm actually missing that part and wonder about whether there isn't a built-in functionality to get this positioning information directly? The problem by using external divs as tooltip area is that they are located completely outside of the chart and with that I need the information with reference to the top/left origin outside of the chart and the axis labeling.

似乎可行的是使用轴私有_offset属性并将其添加到上面的x和y位置，所以我得到

What seems to work is to use the axis private _offset property and add it to the x and y positions above, so I get

x: point.xaxis.l2p(point.pointNumber[1]) + point.xaxis._offset,
y: point.yaxis.l2p(point.pointNumber[0]) + point.yaxis._offset

但这对我来说看起来很讨厌.有人可以指点我一些关于如何做到这一点的文档或演示情节方式"，尤其是.热图?

But that looks quite nasty to me. Can someone point me to some documentation or demo on how to do that "the plotly way" esp. for the heatmap?

推荐答案

你可以使用 Javascript 的 pageX 和 pageY 函数并将它们与 Plotly 的悬停事件结合起来.

You could use Javascript's pageX and pageY functions and combine them the with Plotly's hover event.

您可以获取绝对像素的光标位置并直接使用它.在下面的代码片段中，当鼠标位于 Plotly div 上方时，一个点与光标一起移动.它的大小和颜色由光标所在的数据决定.

You can get the cursor position in absolute pixels and use it directly. In the snippet below a dot is moving together with the cursor when the mouse is above the Plotly div. Its size and color are determined by the data over which the cursor is located.

当然你可以绑定 onmousemove 事件也可以添加到情节的任何部分，并制作出比点更复杂的东西.

Of course you can bind the onmousemove event to any part of the plot as well and make something more sophisticated than just a dot.

//create some random data
var data = [{z: [], type: 'heatmap'}];
var z = [];
	
for (var i = 0; i < 10; i += 1) {
  z = [];
  for (var j = 0; j < 10; j += 1) {
    z.push(Math.random());
  }
  data[0].z.push(z);
}	

var myPlot = document.getElementById('myDiv');
var myPoint = document.getElementById('myPoint');
var colors = Plotly.d3.scale.category20();

//move the red dot
myPlot.onmousemove = function(event) {
  myPoint.style.left = event.pageX + "px";
  myPoint.style.top = event.pageY + "px";
}
myPlot.onmouseleave = function() {
  myPoint.style.left = "-999px";
  myPoint.style.top = "-999px";
}

//create the plot
Plotly.newPlot('myDiv', data);
//use Plotly's hover event to get the data
myPlot.on('plotly_hover', function(data){
	myPoint.style.border = "solid " + (2 + (data.points[0].z * 5)) +"px " + colors(Math.abs(1 - data.points[0].z));
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'>
</div>
<div id="myPoint" style="top: -999px; left: -999px; border: 5px solid #ff0000; border-radius: 50%; position: absolute; z-index: 999;">
</div>

相关文章