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

Question

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

Answer 1

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

＆＃13;

＆＃13;

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);
          });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;