Пользовательское позиционирование подсказки

Question

У меня проблемы с правильной позицией пользовательской всплывающей подсказки на платной карте Plotly.js.

Я использую метод l2p (для чего этот акроним стоит?) В сочетании с данными pointNumber, чтобы получить относительное позиционирование в тепловой карте. Это выглядит следующим образом:

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

Но проблема в том, что она является относительно верхнего/левого происхождения тепловой карты SVG себя без наружных х- и у-меток по оси, так что я на самом деле не хватает, что и интересно, не существует ли встроенной функции для получения этой информации о местоположении напрямую? Проблема с использованием внешних divs в качестве области подсказки заключается в том, что они полностью расположены за пределами диаграммы, и мне нужна информация со ссылкой на верхнее/левое начало вне диаграммы и обозначение оси.

Что, кажется, работает, чтобы использовать ось частного _offset свойства и добавить его к й и у позиции выше, поэтому я получаю

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 что способ рассчитать положение в настоящее время лучший способ сделать это, и, таким образом, этот вопрос может быть закрыт.