Javascript 使用plotly.js在同一页面上绘制多个等高线图的自定义工具提示无法正常工作

下面是示例代码（）：

var x=[10,3015060012001800]；
变量y=[-25，-7,10,25,35]；
变量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]
];
变量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数据=[{
x:x，
y:y，
z:z，
类型：'轮廓'，
自动提示：是的，
对,，
轮廓：{
着色：“热图”，
showlabels：没错，
拉贝尔丰：{
家庭：“Raleway”，
尺码：12，
颜色：'白色'，
}
},
色条：{
标题：“zAxisData”，
标题栏：'对'，
标题字体：{
尺码：14，
系列：“Arial，无衬线”
}
}  
}];
变量数据1=[{
x:x，
y:y，
z:z1，
类型：'轮廓'，
自动提示：是的，
对,，
轮廓：{
着色：“热图”，
showlabels：没错，
拉贝尔丰：{
家庭：“Raleway”，
尺码：12，
颜色：'白色'，
}
},
色条：{
标题：“zAxisData”，
标题栏：'对'，
标题字体：{
尺码：14，
系列：“Arial，无衬线”
}
}  
}];
变量布局={
xaxis：{
标题：“xAxisData”，//设置x轴标签
类型：'类别'，
主播：“亚克斯”，
标题字体：{
家庭：“信使新，单空间”，
尺码：18，
颜色：“#7f7f7f”
}
},
亚克斯：{
标题：“yAxisData”，//设置y轴标签
类型：'类别'，
主播：“xaxis”，
标题字体：{
家庭：“信使新，单空间”，
尺码：18，
颜色：“#7f7f7f”
}
},
悬停模式：'最近'，
};
Plotly.newPlot（'myDiv'，数据，布局）；
Plotly.newPlot（'myDiv1'，data1，布局）；
var div=Plotly.d3.select（'body'）.append（“div”）.attr（“class”，“tooltip-d3”）
.样式（“不透明”，1）；
var myPlot=document.getElementById（'myDiv'）；
var myPlot1=document.getElementById（'myDiv1'）；
myPlot.on（'plotly_hover'，函数（eventdata）{
//console.log（divName）；
console.log（eventdata）；
var points=eventdata.points[0]；
var工具提示=”；
工具提示=工具提示+“”+点.x+“”+点.y+“”+点.z+“”；
var x=points.xaxis.l2p（points.pointNumber[1]）+points.xaxis.\u偏移量；
变量y=points.yaxis.l2p（points.pointNumber[0]）+points.yaxis.\u偏移量；
过渡部（）
.持续时间（200）
.样式（“不透明”，1）；
div.html（工具提示）
.样式（“左”，x+“px”）
.样式（“顶部”（y+70）+“px”）；
}，假）；
myPlot.on（'plotly_unhover'，函数（数据）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
}，假）；
//第二个图的悬停代码
myPlot1.on（'plotly_hover'，函数（eventdata）{
//console.log（divName）；
console.log（eventdata）；
var points=eventdata.points[0]；
var工具提示=”；
工具提示=工具提示+“”+点.x+“”+点.y+“”+点.z+“”；
var x=points.xaxis.l2p（points.pointNumber[1]）+points.xaxis.\u偏移量；
变量y=points.yaxis.l2p（points.pointNumber[0]）+points.yaxis.\u偏移量；
过渡部（）
.持续时间（200）
.样式（“不透明”，1）；
div.html（工具提示）
.样式（“左”，x+“px”）
.样式（“顶部”（y+70）+“px”）；
}，假）；
myPlot1.on（'plotly_unhover'，函数（数据）{
过渡部（）
.持续时间（500）
.样式（“不透明度”，0）；
}，假）；

.tooltip-d3{
位置：绝对位置；
文本对齐：居中；
最小宽度：175px；
最小高度：150；
填充：2px；
字号：8px；
背景：#fff；
边框：1px实心#000；
边界半径：8px；
指针事件：无；
z指数：9999；
}

---

我检查了您的代码，似乎有很多错误，根本问题是，您将

工具提示

附加到

主体

标记，而不是单独的绘图，因此即使我们将鼠标悬停在第二个图形上，工具提示也会相对于主体标记出现，因此我们发现它位于同一位置，解决方案是将工具提示添加到各个图表中

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!