Question

我正面临着在Plotly.js热图上正确定位自定义工具提示的问题。

我正在使用l2p方法（这个首字母缩略词代表什么？）与pointNumber数据结合使用，以获得热图中的相对位置。它看起来像：

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

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

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

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

但这对我来说非常讨厌。有人可以指点我一些文档或演示如何做“情节方式”尤其。热图？

Answer 1

One of the core developers of Plotly answered me to this question我计算位置的方式目前是最佳方式，因此可以关闭此问题。

Answer 2

您可以使用Javascript的pageX and pageY功能，并将其与Plotly的悬停事件结合使用。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

自定义工具提示定位

2 个答案: