如何使Plotly.js侦听刻度标签的单击事件? [英] How to make Plotly.js listen the click events of the tick labels?

问题描述

因此，在此动态图表中，当单击任何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.

推荐答案

您可以将d3事件侦听器添加到所有y-ticks，并确保SVG组获取所有

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>

这篇关于如何使Plotly.js侦听刻度标签的单击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！