如何让 Plotly.js 监听刻度标签的点击事件？

Question

因此，在此动态图表中，我想在单击任何 Y 轴的刻度标签时更改 Y 轴的最小值和最大值。

Answer 1

您可以向所有 y-ticks 添加一个 d3 事件侦听器，并确保 SVG 组获取所有events。将整个片段包装在 Plotly 的afterplot事件中可确保事件侦听器在更新图形后不会丢失。

var trace1 = {
  x: [1, 2, 3, 4], 
  y: [10, 15, 13, 17], 
  type: 'scatter'
};
var trace2 = {
  x: [1, 2, 3, 4], 
  y: [16, 5, 11, 9], 
  type: 'scatter'
};
var data = [trace1, trace2];
var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data);
myPlot.on('plotly_afterplot', function(){
    Plotly.d3.selectAll(".yaxislayer-above").selectAll('text')
          .on("click", function(d) {
            alert("Hello, I am " + d.x);
          });
});

.yaxislayer-above {
  cursor: pointer;
  pointer-events: all;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>