以下是示例代码（https://jsfiddle.net/meb4wnLd/6/）：
var x =[10,30,150,600,1200,1800];
var y = [-25,-7,10,25,35];
var z= [
[250, 165, 91, 69, 0,0],
[250,250,159,79,41,27],
[250,250,192,82,42,28],
[250,250,192,84,42,28],
[250,250,195,84,42,28]
];
var z1= [
[240, 155, 91, 59, 0,0],
[240,240,149,59,31,17],
[240,240,182,72,32,17],
[240,240,182,74,32,17],
[240,240,185,74,32,17]
];
var data = [ {
x : x,
y : y,
z: z,
type: 'contour',
autocontour: true,
connectgaps: true,
contours: {
coloring: 'heatmap',
showlabels: true,
labelfont: {
family: 'Raleway',
size: 12,
color: 'white',
}
},
colorbar:{
title:"zAxisData",
titleside: 'right',
titlefont: {
size: 14,
family: 'Arial, sans-serif'
}
}
}];
var data1 = [ {
x : x,
y : y,
z: z1,
type: 'contour',
autocontour: true,
connectgaps: true,
contours: {
coloring: 'heatmap',
showlabels: true,
labelfont: {
family: 'Raleway',
size: 12,
color: 'white',
}
},
colorbar:{
title:"zAxisData",
titleside: 'right',
titlefont: {
size: 14,
family: 'Arial, sans-serif'
}
}
}];
var layout ={
xaxis: {
title: "xAxisData", //set x axis label
type: 'category',
anchor: 'yaxis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: "yAxisData", //set y axis label
type :'category',
anchor: 'xaxis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
hovermode:'closest',
};
Plotly.newPlot('myDiv', data, layout);
Plotly.newPlot('myDiv1', data1, layout);
var div = Plotly.d3.select('body').append("div") .attr("class", "tooltip-d3")
.style("opacity", 1);
var myPlot = document.getElementById('myDiv');
var myPlot1 = document.getElementById('myDiv1');
myPlot.on('plotly_hover', function(eventdata){
//console.log(divName);
console.log(eventdata);
var points = eventdata.points[0];
var tooltip ="<table>";
tooltip = tooltip + "<tr><td>"+points.x+"</td><td>"+points.y+"</td></tr><tr><td>"+points.z+"</td><td></td></tr></table>";
var x = points.xaxis.l2p(points.pointNumber[1]) + points.xaxis._offset;
var y = points.yaxis.l2p(points.pointNumber[0]) + points.yaxis._offset;
div.transition()
.duration(200)
.style("opacity", 1);
div.html(tooltip)
.style("left", x +"px")
.style("top", (y+70) + "px");
}, false);
myPlot.on('plotly_unhover', function(data){
div.transition()
.duration(500)
.style("opacity", 0);
},false);
//Hover code for second graphs
myPlot1.on('plotly_hover', function(eventdata){
//console.log(divName);
console.log(eventdata);
var points = eventdata.points[0];
var tooltip ="<table>";
tooltip = tooltip + "<tr><td>"+points.x+"</td><td>"+points.y+"</td></tr><tr><td>"+points.z+"</td><td></td></tr></table>";
var x = points.xaxis.l2p(points.pointNumber[1]) + points.xaxis._offset;
var y = points.yaxis.l2p(points.pointNumber[0]) + points.yaxis._offset;
div.transition()
.duration(200)
.style("opacity", 1);
div.html(tooltip)
.style("left", x +"px")
.style("top", (y+70) + "px");
}, false);
myPlot1.on('plotly_unhover', function(data){
div.transition()
.duration(500)
.style("opacity", 0);
},false);
.tooltip-d3 {
position: absolute;
text-align: center;
min-width: 175px;
min-height: 150;
padding: 2px;
font-size: 8px;
background : #fff;
border: 1px solid #000;
border-radius: 8px;
pointer-events: none;
z-index: 9999;
}<div id="myDiv" style="width: 400px; height: 400px;">
</div>
<div id="myDiv1" style="width: 400px; height: 400px;">
</div>
我正在同一页面上创建多个等值线图，并尝试通过处理＆＃39; plotly_hover＆＃39;来创建等高线图的自定义工具提示。事件（如此处所述https://community.plot.ly/t/how-to-customize-plotly-tooltip/332/2）。但是，在第二个图表上悬停显示第一个图表上的自定义工具提示。 有人知道如何解决它吗？
答案 0 :(得分：0)
我检查了你的代码，似乎有很多错误，根本问题是，你将tooltip附加到body标签而不是单个地块，因此即使我们将鼠标悬停在第二个图表上，工具提示将相对于正文标记显示，因此我们在同一位置找到它，解决方法是将工具提示添加到各个图表中。
var tooltip1 = Plotly.d3.select('#myDiv .svg-container').append("div").attr("class", "tooltip-d3")
.style("opacity", 1);
var tooltip2 = Plotly.d3.select('#myDiv1 .svg-container').append("div").attr("class", "tooltip-d3")
.style("opacity", 1);
我们可以使用上面的代码为每个图创建两个新的div，它们将包含相应的工具提示。
myPlot.on('plotly_hover', function(eventdata) {
//console.log(divName);
console.log(eventdata);
var points = eventdata.points[0];
var tooltip = "<table>";
tooltip = tooltip + "<tr><td>" + points.x + "</td><td>" + points.y + "</td></tr><tr><td>" + points.z + "</td><td></td></tr></table>";
var x = points.xaxis.l2p(points.pointNumber[1]) + points.xaxis._offset;
var y = points.yaxis.l2p(points.pointNumber[0]) + points.yaxis._offset;
tooltip1.transition()
.duration(200)
.style("opacity", 1);
tooltip1.html(tooltip)
.style("position", "absolute")
.style("left", x + "px")
.style("top", (y + 70) + "px");
}, false);
myPlot.on('plotly_unhover', function(data) {
tooltip1.transition()
.duration(500)
.style("opacity", 0);
}, false);
然后使用上面的代码，我们可以显示/隐藏相应的工具提示。
请学习我的解决方案，如果理解有任何困难，请告诉我。
Note: SO Snippet seems to hang when I use the code, hence going with JSFiddle!