如何同时使用plotly_click和plotly_selected？

Question

所以我的 html 页面上显示了一个信号图。我想为用户提供点击特定点以创建垂直线的可能性：Image with vertical bar。我还想让用户在特定区域画一个框：Image with box area

这两个代码都可以工作，但是当我将它们组合在一起时，我不能再单击以显示那些垂直线（但仍然可以绘制框）。我认为点击事件已传递给 plotly_selected 事件，您知道我该如何解决吗？

// draw vertical line
plotDiv.on('plotly_click', function(data){
        var pts = '';
        for(var i=0; i < data.points.length; i++){
            pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
            console.log("Vous voulez ajouter une rupture au point : ",data.points[i].x );
            layout["shapes"].push({
                'type': 'line',
                'x0':data.points[i].x,
                'y0':line_bottom,
                'x1':data.points[i].x,
                'y1':line_top,
                'line': {
                    'color': 'black',
                     dash: 'dot',
                    'width':3,
                }
            })
            Plotly.redraw('myDiv');
        }
    });

// create box 
    plotDiv.on('plotly_selected', (eventData) => {
        var xRange = eventData.range.x;
        var yRange = eventData.range.y;
        console.log("x0 = ",xRange[0]," x1 = ",xRange[1]," y0 = ",yRange[0]," y1 = ",yRange[1]);
        // trait vertical en x0
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[0],
            'x1':xRange[0],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        //vertical at x1
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[1],
            'y0':yRange[0],
            'x1':xRange[1],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        //horizontal at y1
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[1],
            'x1':xRange[1],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        // horizontal at y0
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[0],
            'x1':xRange[1],
            'y1':yRange[0],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        Plotly.redraw('myDiv');
    });

提前致谢！

Answer 1

我认为为了让这个工作你所缺少的只是简单地检查你的 plotly_selected 处理程序中的事件数据，如果它不可用则尽早 return。

plotDiv.on('plotly_selected', (eventData) => {
  if (!eventData) return;
  ...
});

单击而不拖动可以同时触发 plotly_click 和 plotly_selected 处理程序。但是，后一个处理程序不会有任何关联的事件数据，这就是为什么代码似乎没有像您预期的那样工作的原因。

单击并拖动应该只触发 plotly_selected 处理程序，因此您不需要在 plotly_click 中提前 return 执行类似操作以防止读取空事件数据。

如何同时使用plotly_click和plotly_selected？

How use plotly_click and plotly_selected simultaneously?

javascript

plotly

plotly.js