Plotly.js中实现点击切换3D图表注释显示/隐藏的问题

我用Plotly.js创建了3D曲面/带状图，给图表添加了显示特定数值的注释。为了避免注释遮挡视图，想实现点击时切换所有注释的显示/隐藏，或者降低透明度。我已经写了注释创建、布局设置和点击事件绑定的代码，但鼠标悬停注释时显示可点击状态，点击却没反应，请问问题出在哪？

注释创建代码 #

let annotation = {
    x: column,
    y: i+0.25,
    z: row[column],
    xref: 'x',
    yref: 'y',
    zref: 'z',
    text: dataindex[column]+i+':' + row[column],
    showarrow: true,
    arrowhead: 0,
    opacity: 0.8,
    ax: 0,
    ay: -20,
    az: 0,
    // 让注释响应点击事件
    captureevents: true,
    clickannotation: true,
    editable: true
}
annotations.push(annotation);

布局设置代码 #

let layout = {
    autosize: true,
    hovermode: 'closest',
    displayModeBar: true,
    modebar: {
        orientation: 'v',
    },
    margin: {
        l: 20,
        r: 40,
        b: 40,
        t: 40,
    },
    scene: {
        // 调整默认视角，可设置相机参数（也可根据行列相对调整）
        camera: {
            eye: {x: -3, y: -1, z: 1}
        },
        annotations: annotations
    }
}

点击事件代码 #

Plotly.newPlot('gd', {
    'data': traces,
    'layout': layout
});

var myPlot = document.getElementById('gd');

myPlot.on('plotly_click', function(data){
    annotations = self.layout.annotations || [];
    annotations.push(annotation);
    Plotly.relayout('gd',{annotations: annotations})
    debugger
});

问题原因及修复方案 #

1. 事件监听选错了 #

你绑定的plotly_click是图表通用点击事件（触发于数据点、空白区域），3D场景中的注释点击有专属事件plotly_annotationclick，用错事件自然没响应。

2. 核心逻辑完全偏离需求 #

你的点击事件代码是在往注释数组里新增注释，但需求是切换已有注释的显示状态/透明度，逻辑完全反了。另外代码里的self未定义，会直接报错中断执行。

3. 注释配置有冗余无效项 #

clickannotation不是Plotly注释的合法属性，captureevents也不适用于3D注释场景，只要保留editable: true就能让注释触发点击事件。

修复后的点击事件代码 #

var myPlot = document.getElementById('gd');
// 绑定注释专属点击事件
myPlot.on('plotly_annotationclick', function() {
    // 获取当前场景的所有注释
    const currentAnnotations = myPlot.layout.scene.annotations || [];
    // 批量切换注释的可见性（或调整透明度）
    const updatedAnnotations = currentAnnotations.map(anno => ({
        ...anno,
        // 切换可见状态：显示变隐藏，隐藏变显示
        visible: anno.visible !== false,
        // 可选：切换透明度，替代可见性控制
        // opacity: anno.opacity === 0.8 ? 0.2 : 0.8
    }));
    // 更新图表布局
    Plotly.relayout('gd', { 'scene.annotations': updatedAnnotations });
});

额外注意点 #

• 如果需要点击图表任意区域都切换注释状态，才用plotly_click事件，但要注意区分点击目标是否为注释。
• 调试时打开浏览器控制台，查看是否有未定义变量等报错，这是排查无响应问题的关键。

内容的提问来源于stack exchange，提问作者nmy2015