识别 Plotly 中的子图答案

【问题标题】：Identify Subplots in Plotly识别 Plotly 中的子图
【发布时间】：2021-10-24 21:31:04
【问题描述】：

是否可以确定我的鼠标在哪个子图中？我有一个函数，我可以用它向我的跟踪添加点，但我的问题是，一旦我添加一个点，这个点就会显示在两个子图中，这就是为什么我希望能够获得数字/名称我的子图来区分偶数在哪个子图中被触发。所以对我来说弄清楚事件在哪个子图中触发很重要。这是一个带有两个带有点击功能的子图的 Plotly 示例。与其向我显示图中的数据，不如查看它点击了哪个子图对我来说很重要！

var trace1 = {
x: [1, 2, 3],
y: [4, 5, 6],
type: 'scatter'
};

var trace2 = {
x: [20, 30, 40],
y: [50, 60, 70],
xaxis: 'x2',
yaxis: 'y2',
type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
grid: {rows: 1, columns: 2, pattern: 'independent'},
};
var myPlot = document.getElementById('myDiv')
Plotly.newPlot(myPlot, data, layout);
myPlot.on('plotly_click', function(data){
  var pts = '';
  for(var i=0; i < data.points.length; i++){
      pts = 'x = '+data.points[i].x +'\ny = '+
          data.points[i].y.toPrecision(4) + '\n\n';
  }
  alert('Closest point clicked:\n\n'+pts);
});





  <head>
      <!-- Load plotly.js into the DOM -->
      <script src='https://cdn.plot.ly/plotly-2.3.1.min.js'></script>
  </head>

  <body>
      <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  </body>

【问题讨论】：

标签： javascript plotly

【解决方案1】：

通过查看 MouseEvent 数据，您似乎可以使用以下方法识别子图：

myPlot.on('plotly_click', function (data) {
  console.log(data.event.target.dataset.subplot)
});

单击第一个子图日志xy。点击第二个子图日志x2y2。

【讨论】：