如何实现Plotly图表任意位置点击并获取准确坐标？解决偏移问题

问题背景 #

我正尝试在Plotly中实现「任意位置点击」功能，以便获取用户点击Plotly图表任意位置时的坐标。目前Plotly官方提供的点击事件仅在用户点击已绘制的数据点时生效，但我需要实现对背景白色画布等任意区域的点击监听。
Shiny框架的图表点击事件可以实现该功能，但Plotly暂未原生支持该特性。
之前找到的参考实现存在父元素边距导致的坐标偏移问题，原实现代码如下：

原参考代码 #

JS代码

var d3 = Plotly.d3;
var gd = document.getElementById('graph');

Plotly.plot('graph', [{
  y: [2, 1, 2]
}])
.then(attach);

function attach() {
  var xaxis = gd._fullLayout.xaxis;
  var yaxis = gd._fullLayout.yaxis;
  var l = gd._fullLayout.margin.l;
  var t = gd._fullLayout.margin.t;
  
  gd.addEventListener('mousemove', function(evt) {
    var xInDataCoord = xaxis.p2c(evt.x - l);
    var yInDataCoord = yaxis.p2c(evt.y - t);
    console.log(evt.x, l)
    
    Plotly.relayout(gd, 'title', ['x: ' + xInDataCoord, 'y : ' + yInDataCoord].join('<br>'));
  });
}

HTML代码

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div style="padding-left: 100px; margin-left: 100px">
    <div id="graph"></div>
  </div>
</body>

该示例方案的一个问题是未考虑父元素的内边距/外边距。我在示例中添加了一个左侧同时带有padding和margin的父div，这会导致x轴坐标值出现偏移，显然这类问题是当前需求的解决方案必须处理的。

修复后的可行方案 #

核心修复逻辑是用getBoundingClientRect()获取图表元素相对于视口的偏移量，替换原来直接用事件坐标的逻辑，自动兼容父元素的margin、padding、定位属性：

修复后完整JS代码 #

var gd = document.getElementById('graph');

Plotly.plot('graph', [{
  y: [2, 1, 2]
}])
.then(attach);

function attach() {
  var xaxis = gd._fullLayout.xaxis;
  var yaxis = gd._fullLayout.yaxis;
  var plotMarginLeft = gd._fullLayout.margin.l;
  var plotMarginTop = gd._fullLayout.margin.t;
  
  gd.addEventListener('click', function(evt) {
    // 获取图表元素相对于视口的偏移，自动计算父元素所有边距影响
    const rect = gd.getBoundingClientRect();
    // 计算鼠标在图表画布内的相对像素坐标
    const mouseXInCanvas = evt.clientX - rect.left;
    const mouseYInCanvas = evt.clientY - rect.top;
    // 转换为数据坐标系坐标，减去图表本身的内边距
    const xData = xaxis.p2c(mouseXInCanvas - plotMarginLeft);
    const yData = yaxis.p2c(mouseYInCanvas - plotMarginTop);

    // 测试输出，可替换为自己的业务逻辑
    Plotly.relayout(gd, 'title', [`点击位置x坐标: ${xData.toFixed(2)}`, `点击位置y坐标: ${yData.toFixed(2)}`].join('<br>'));
  });
}

方案说明 #

• 将原代码的mousemove事件替换为click事件，符合点击获取坐标的需求，需要实时坐标可以改回mousemove
• 用getBoundingClientRect()获取图表元素的视口偏移，完全规避父元素边距、定位带来的坐标偏移问题
• 坐标转换逻辑保留了Plotly本身的p2c方法，适配所有Plotly坐标轴配置（包括对数轴、分类轴等）
• 坐标计算结果已适配Plotly本身的布局margin，不管图表左右上下留白多少，返回的坐标都和数据点的坐标体系完全一致

内容的提问来源于stack exchange，提问作者un umile appassionato