我在使用 Plotly 创建的 3D 曲面图上遇到悬停功能问题。 当我将鼠标移到图表的边缘时，悬停交互似乎没有完全扩展以覆盖所有数据。因此，边缘附近的一些数据点无法通过悬停模板访问或可见。 这是 Plotly 3D 曲面图的已知问题吗？ 是否有任何具体的调整或解决方法来确保悬停功能对边缘数据点正确工作？在代码中，如果 sizex 为 3 并且 sizey 为 500，我们可以很好地访问数据，但是当我们将 sizex 更改为 3 并将 sizey 更改为 1000 时，我遇到一个问题，它不显示悬停文本。
正在使用的 Plotly 版本：2.35.2 这是代码；
function generateMockData(sizex, sizey) {
const z_data = ;
const x_data = ;
const y_data = ;
for (let i = 0; i <= sizey; i++) {
const row = ;
for (let j = 0; j <= sizex; j++) {
row.push(0);
}
z_data.push(row);
}
for (let i = 0; i <= sizey; i++) {
const row = ;
for (let j = 0; j <= sizex; j++) {
row.push(j);
}
x_data.push(row);
}
for (let j = 0; j <= sizey; j++) {
y_data.push(j);
}
return { x_data, y_data, z_data };
}
// Below settings works fine:
sizex = 3;
sizey = 500;
// Below settings causes hovertext dosen’t display for x=3
//sizex = 3;
//sizey = 1000;
const { x_data, y_data, z_data } = generateMockData(sizex, sizey);
const trace = {
type: ‘surface’,
x: x_data,
y: y_data,
z: z_data,
hovertemplate: ‘X: %{x}
Y: %{y}
Z: %{z}’,
colorscale: ‘Viridis’
};
const layout = {
title: ‘Mock Data 3D Surface’,
autosize: false,
width: 800,
height: 800,
margin: {
l: 65,
r: 50,
b: 65,
t: 90
},
scene: {
xaxis: { title: ‘X Axis’ },
yaxis: { title: ‘Y Axis’ },
zaxis: { title: ‘Z Axis’ }
}
};
// Render grafen
Plotly.newPlot(‘myDiv’, [trace], layout);`:
link to the code: https://codepen.io/fardoos020202/pen/XJrNKJQ
我尝试了各种解决方案并阅读了他们的论坛，但没有找到解决此问题的方法。
解决方案1： 您可以通过显式设置场景的长宽比来调整绘图的长宽比，以防止失真，并尝试限制高度或宽度以使其更像正方形。这是一些代码：
const layout = {
title :'',
autosize : true,
width : 800,
height: 800,
margin: {
l: 65,
r: 50,
b: 65,
t: 90
},
scene: {
// mention all axes here
aspectmode : 'cube' // set the aspect ratio to be equal for all axes
}
}
解决方案2： 这将加载最新版本，这可能会帮助您解决悬停行为和渲染问题
解决方案3： 您可以将
hovermodeclosest使用上面的解决方案尝试下面的代码我希望它能帮助你
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
function generateMockData(sizex, sizey) {
const z_data = [];
const x_data = [];
const y_data = [];
for (let i = 0; i <= sizey; i++) {
const row = [];
for (let j = 0; j <= sizex; j++) {
row.push(0);
}
z_data.push(row);
}
for (let i = 0; i <= sizey; i++) {
const row = [];
for (let j = 0; j <= sizex; j++) {
row.push(j);
}
x_data.push(row);
}
for (let j = 0; j <= sizey; j++) {
y_data.push(j);
}
return { x_data, y_data, z_data };
}
const sizex = 3;
const sizey = 1000;
const { x_data, y_data, z_data } = generateMockData(sizex, sizey);
const trace = {
type: 'surface',
x: x_data,
y: y_data,
z: z_data,
hovertemplate: 'X: %{x}<br>Y: %{y}<br>Z: %{z}<extra></extra>',
colorscale: 'Viridis'
};
const layout = {
title: 'Mock Data 3D Surface',
autosize: true,
width: 800,
height: 800,
margin: {
l: 65,
r: 50,
b: 65,
t: 90
},
hovermode: 'closest', // hover is linked to the closest point as discussed in solution 2
scene: {
xaxis: { title: 'X Axis' },
yaxis: { title: 'Y Axis' },
zaxis: { title: 'Z Axis' },
aspectmode: 'cube' // may help you for aspect ratio distortion
}
};
Plotly.newPlot('myDiv', [trace], layout);
</script>
</body>