自定义工具提示定位

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

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

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

但随着该问题是，它是相对于热图的顶部/左起源SVG本身没有外部X轴和Y轴标签，所以我实际上缺少部分，并想知道是否没有内置的功能直接获取这个定位信息？将外部div用作工具提示区域的问题在于，它们完全位于图表的外部，并且需要参考图表外部的顶部/左侧原点以及轴标签的信息。

什么似乎工作就是用轴私有财产_offset并把它添加到X和Y上面的位置，所以我得到

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

但是，这看起来很讨厌我。有人可以指点我一些文件或演示如何做到这一点“情节的方式”尤其如此。为热图吗？

来源

2016-12-30 andi1984

您可以使用Javascript的pageX and pageY函数，并将它们与Plotly的悬停事件结合使用。

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

当然，您还可以将onmousemove事件绑定到绘图的任何部分，并使其更加复杂，而不仅仅是点。

//create some random data 
 
var data = [{z: [], type: 'heatmap'}]; 
 
var z = []; 
 
\t 
 
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); 
 
} \t 
 

 
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){ 
 
\t 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>

来源

2017-01-03 22:34:15

嗨马克西米利安，是的，我知道pageX/Y事件属性，但我的观点是与情节数据本身的整合：你现在想要访问你悬停的底层Plotly数据？这就是我使用'plotly_hover'事件的原因，因为这是该事件的目的，但不幸的是我无法在响应数据中找到任何可以解决问题的pageX/Y信息。 – andi1984

@ andi1984：查看更新后的代码段。现在它使用数据和pageX/Y属性。 –

Thx为您的更新。我可以看到你的观点，使用mousemove来更新位置，并使用阴谋内部的一个来处理数据。但老实说，这种方法看起来像是一个围绕Plotly API的解决方案，使之成为可能。这是一种确实的方式，但我会假设我可以在那个剧情事件回调中做同样的事情！所以这不是我想到的答案。尽管如此，thx的帮助和答案！如果在接下来的日子里这将是我的问题的唯一答案，我会给你赏金。 – andi1984

One of the core developers of Plotly answered me to this question我计算位置的方法是目前做的最好的办法，因此这个问题可以被关闭。

来源

2017-01-04 16:44:19 andi1984

自定义工具提示定位

回答

相关问题