कस्टम टूलटिप पोजिशनिंग

Question

मुझे plotly.js heatmap पर एक कस्टम टूलटिप को सही तरीके से स्थापित करने के लिए समस्याएं आ रही हैं।

मैं l2p विधि का उपयोग कर रहा हूं (इस शब्दकोष के लिए क्या खड़ा है?) बिंदु संख्या के साथ संयोजन में हीटमैप के भीतर एक सापेक्ष स्थिति प्राप्त करने के लिए। ऐसा लगता है कि:

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

लेकिन उस के साथ समस्या यह है कि यह हीटमैप के शीर्ष/बाईं मूल के सापेक्ष बाहरी x- और y- अक्ष लेबल के बिना ही एसवीजी है, इसलिए मैं वास्तव में उस याद कर रहा हूँ है इस स्थिति की जानकारी को सीधे प्राप्त करने के लिए अंतर्निहित कार्यक्षमता नहीं है या नहीं, इस बारे में आश्चर्य और आश्चर्य है? टूलटिप क्षेत्र के रूप में बाहरी divs का उपयोग करके समस्या यह है कि वे चार्ट के बाहर पूरी तरह से स्थित हैं और इसके साथ मुझे चार्ट और अक्ष लेबलिंग के बाहर शीर्ष/बाएं मूल के संदर्भ में जानकारी की आवश्यकता है।

क्या काम करने के लिए लगता है अक्ष निजी _offset संपत्ति का उपयोग करें और एक्स और इसके बाद के संस्करण y स्थितियां में जोड़ने के लिए है, इसलिए मैं

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

मिल लेकिन वह मेरे लिए काफी बुरा लग रहा है। क्या कोई मुझे कुछ दस्तावेज या डेमो पर इंगित कर सकता है कि "साजिश के तरीके" esp कैसे करें। heatmap के लिए?

Answer 1

आप जावास्क्रिप्ट के pageX and pageY फ़ंक्शंस का उपयोग कर सकते हैं और उन्हें प्लॉटली के होवर ईवेंट के साथ जोड़ सकते हैं।

आप कर्सर की स्थिति पूर्ण पिक्सेल में प्राप्त कर सकते हैं और इसे सीधे उपयोग कर सकते हैं। एक बिंदु के नीचे स्निपेट कर्सर के साथ एक साथ आगे बढ़ रहा है जब माउस प्लॉटली 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 कि जिस तरह से मैं स्थिति की गणना वर्तमान में यह ऐसा करने का सबसे अच्छा तरीका है और इस तरह इस मुद्दे को बंद किया जा सकता है।