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

2022-01-21 00:00:00 plotly dynamic charts javascript

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

So, in this dynamic chart, I want to change the Y-axis' min and max values when any of the Y-axis' Tick Label is clicked.

推荐答案

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

You could add a d3 event listener to all y-ticks and make sure that the SVG group gets all the events. Wrapping the whole snippet in Plotly's afterplot event makes sure that the event listener does not get lost after updating the graph.

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>

相关文章