Định vị chú giải công cụ tùy chỉnh

Question

Tôi đang gặp sự cố để định vị đúng chú giải công cụ tùy chỉnh trên bản đồ nhiệt Plotly.js.

Tôi đang sử dụng phương pháp l2p (từ viết tắt này là gì?) Kết hợp với dữ liệu pointNumber để có được vị trí tương đối trong bản đồ nhiệt. Có vẻ như:

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

Nhưng vấn đề là nó liên quan đến gốc trên cùng/bên trái của bản đồ nhiệt svg mà không có nhãn x và trục ngoài, vì vậy tôi thực sự thiếu một phần và thắc mắc về việc liệu không có chức năng tích hợp để có được thông tin định vị này trực tiếp? Vấn đề bằng cách sử dụng div ngoài như vùng chú giải công cụ là chúng nằm hoàn toàn bên ngoài biểu đồ và tôi cần thông tin có tham chiếu đến nguồn gốc trên cùng bên trái của biểu đồ và ghi nhãn trục.

gì dường như làm việc là sử dụng các trục tài sản _offset tin và thêm nó vào x và vị trí y trên, vì vậy tôi có được

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

Nhưng điều đó có vẻ khá khó chịu với tôi. Ai đó có thể chỉ cho tôi một số tài liệu hoặc bản demo về cách làm điều đó "theo cách gọn gàng" đặc biệt. cho bản đồ nhiệt?

Answer 1

Bạn có thể sử dụng các chức năng pageX and pageY của Javascript và kết hợp chúng với sự kiện di chuột của Plotly.

Bạn có thể lấy vị trí con trỏ bằng pixel tuyệt đối và sử dụng nó trực tiếp. Trong đoạn mã bên dưới, dấu chấm sẽ di chuyển cùng với con trỏ khi con trỏ ở trên Lô đất div. Kích thước và màu sắc của nó được xác định bởi dữ liệu mà con trỏ nằm.

Tất nhiên bạn có thể ràng buộc sự kiện onmousemove với bất kỳ phần nào của cốt truyện cũng như làm cho một điều gì đó tinh vi hơn chỉ là một dấu chấm.

//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 rằng cách tôi tính toán vị trí hiện là cách tốt nhất để làm việc đó và vì vậy vấn đề này có thể được đóng lại.