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

How to make Plotly.js listen the click events of the tick labels?(如何让 Plotly.js 监听刻度标签的点击事件?)

问题描述

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

这篇关于如何让 Plotly.js 监听刻度标签的点击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！