识别 Plotly 中的子图
Posted
技术标签:
【中文标题】识别 Plotly 中的子图【英文标题】：Identify Subplots in 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>
【问题讨论】：
【参考方案1】：通过查看 MouseEvent 数据，您似乎可以使用以下方法识别子图：
myPlot.on('plotly_click', function (data)
console.log(data.event.target.dataset.subplot)
);
单击第一个子图日志xy。点击第二个子图日志x2y2。
【讨论】：
以上是关于识别 Plotly 中的子图的主要内容，如果未能解决你的问题，请参考以下文章