Plotly.js 轴单击/拖动事件

Question

I have multiple y-axis in a line chart. Only the last y-axis related grid lines are shown by default. If the user clicks on any other y-axis, grid lines for that y-axis should be shown. But I am unable to find any event in plotly.js which triggers when the axis is clicked or dragged.

Answer 1

Sorry, I can't comment yet. Here's a rather hacky way of registering clicks on yaxis labels. Not sure if that's helpful.

 var trace1 = { x: [1, 2, 3], y: [40, 50, 60], name: 'yaxis data', type: 'scatter' }; var trace2 = { x: [2, 3, 4], y: [4, 5, 6], name: 'yaxis2 data', yaxis: 'y2', type: 'scatter' }; var data = [trace1, trace2]; var layout = { title: 'Double Y Axis Example', yaxis: {title: 'yaxis title'}, yaxis2: { title: 'yaxis2 title', titlefont: {color: 'rgb(148, 103, 189)'}, tickfont: {color: 'rgb(148, 103, 189)'}, overlaying: 'y', side: 'right' } }; Plotly.newPlot('chart', data, layout); var myPlot = document.getElementById('chart'); myPlot.on('plotly_afterplot', function(){ Plotly.d3.selectAll(".nsdrag.drag.cursor-ns-resize").on("click", function() { var target = Plotly.d3.event.target; console.log('clicked on', target.dataset.subplot); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script> <div id="chart"> </div>