カスタムツールチップの配置

Question

Plotly.jsヒートマップにカスタムツールチップを適切に配置する際の問題に直面しています。

ヒートマップ内の相対的な位置を取得するために、pointNumberデータと組み合わせてl2pメソッドを使用しています（この略語は何ですか？）。それは次のようになります。

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

しかし、それに伴う問題は、それが外側のx軸とy軸のラベルなしヒートマップSVG自体の上/左の原点に相対的であるということですので、私は実際にあることを欠けていますこの位置情報を直接取得する機能が組み込まれていないかどうかについての疑問や不思議な点がありますか？ツールチップの領域として外部divを使用することによる問題は、チャートの外側に完全に配置されていることです。チャートの外側の上/左の原点と軸ラベルを参照して情報が必要です。動作しているようです何

は軸プライベート_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

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>

Answer 2

One of the core developers of Plotly answered me to this question私は位置を計算する方法は、現在、それを行うための最善の方法であり、したがって、この問題がクローズすることができます。