情节中的“点击任意位置”事件答案

【问题标题】：'Click anywhere' event in plotly情节中的“点击任意位置”事件
【发布时间】：2021-11-07 15:14:08
【问题描述】：

我正在尝试在 plotly 中实现“点击任意位置”功能，以便我可以在 plotly 图表上的任意位置获取用户点击的坐标。当前的“官方”绘图功能仅在用户单击绘制的数据点时才有效，但我想注册点击，例如在背景白色画布上。

情节的闪亮点击事件可以做到这一点，但令人惊讶的是，这似乎在情节中还不存在。

我做了一些研究，发现以下代码笔实现很接近：https://codepen.io/tim-logan/pen/yLXgpyp

#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>

但是，正如 codepen 的创建者所指出的那样，点击坐标并不精确，因为它们没有考虑填充/边距：

示例解决方法的一个问题是它没有考虑父对象中的填充/边距。我已经举了这个例子并添加了一个在左侧同时具有填充和边距的父 div，这会扭曲 x 轴值的值，并且显然需要在这样的解决方案中进行处理建议在这里。

根据 flot 文档，这应该可以通过从坐标中减去绘图偏移量来用于绘图对象： https://github.com/flot/flot/blob/master/API.md#plot-methods

参见例如以下摘录：

各种东西都塞在一个轴对象中，例如您可以使用 getAxes().xaxis.ticks 找出 xaxis 的刻度。另外两个有用的属性是 p2c 和 c2p，用于从数据点空间转换到画布绘图空间并返回的函数。两者都返回与绘图偏移量偏移的值。

或：

偏移量()

返回网格内绘图区域相对于文档的偏移量，例如用于计算鼠标位置（event.pageX/Y 减去此偏移量就是绘图内的像素位置）。

我尝试实现基于 offset() 的解决方法，但由于我的 js knownledge 不太好，我无法获得代码的工作版本。

有人能提供解决方法来解决偏移问题吗？

【问题讨论】：

标签： javascript plotly click mouseclick-event

【解决方案1】：

我设法通过获取父框的尺寸来消除偏移。请参阅以下修复上述代码笔的示例：

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

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

function attach() {
  
  gd.addEventListener('mousemove', function(evt) {
    var bb = evt.target.getBoundingClientRect();
    var x = gd._fullLayout.xaxis.p2d(evt.clientX - bb.left);
    var y = gd._fullLayout.yaxis.p2d(evt.clientY - bb.top);
    
    Plotly.relayout(gd, 'title', ['x: ' + x, 'y : ' + y].join('<br>'));
  });
}

在此处修复代码笔：https://codepen.io/flaviofusero/pen/BaZRgzO

改编自 sleighsoft 在此处的实现：plotly click events from anywhere on the plot

【讨论】：