un *_*ato 6 javascript click mouseclick-event plotly
我正在尝试在绘图中实现“单击任意位置”功能，以便我可以获得用户单击绘图图表上任何位置的坐标。当前的“官方”绘图功能仅在用户单击绘制的数据点时才起作用，但我想在背景白色画布上注册单击。
情节的闪亮点击事件可以做到这一点，但令人惊讶的是，这在情节中似乎还不存在。
我做了一些研究，发现以下 codepen 实现非常接近：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 知识不太好，我无法获得代码的工作版本。
有人能够提供解决方法来解决偏移问题吗？
我设法通过获取父框的尺寸来消除偏移。请参阅以下修复了上述 codepen 的示例：
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>'));
});
}
此处修复了 codepen：https ://codepen.io/flaviofusero/pen/BaZRgzO
改编自 sleighsoft 的实现：plotly click events from Anywhere on theplot