plotly中的“单击任意位置”事件
我正在尝试在plotly中实现“单击任意位置”功能，以便在用户单击plotly图表的任意位置时获得坐标。当前的“官方”plotly功能仅在用户单击打印数据点时起作用，但我想注册单击，例如在背景白色画布上。
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，它的左边同时有padding和margin，这会使x轴的值发生偏移，很明显，在这里建议的解决方案中需要处理这个问题。
根据flot文档，通过从坐标中减去打印偏移，打印对象应该可以实现这一点：https://github.com/flot/flot/blob/master/API.md#plot-方法
例如，见以下摘录：
axis对象中填充了各种内容，例如，您可以使用GetAxis（）.xaxis.ticks来了解xaxis的刻度。另外两个有用的属性是p2c和c2p，它们是用于从数据点空间转换到画布打印空间并返回的函数。这两个函数都返回与打印偏移量偏移的值。
或：
偏移量
返回网格内绘图区域相对于文档的偏移量，例如用于计算鼠标位置（event.pageX/Y减去该偏移量是绘图内的像素位置）。
我试图实现一个变通方法，基于偏移（），但由于我的js知道不是太好，我不能得到一个工作版本的代码。
有人能提供一个解决方法来解决补偿问题吗？
共有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的实现：从情节的任何地方点击事件
-
我是r-plotly的新手，我正在试图弄清楚如何处理不在数据上的点击。似乎使用我可以从数据中获取点上的事件，但到目前为止，我还没有弄清楚如何对不接近数据但仅在绘图白色部分的单击执行此操作。 来自绘图的闪亮点击事件可以做到这一点，我只需要得到点击的x和y。我想要类似的，但情节要详细。 我是否可以将单击事件指定为来自plotly plot上的任意位置，而不仅仅是数据？ 编辑：令人惊讶的是，这在plot
-
问题内容： 这是很常见的事情，例如，如果您在此处单击stackoverflow上的收件箱。我会打电话给那个对话框或任何被打开的 东西 。 现在我知道有两种方法可以解决这个问题， 你创建一个无形的覆盖，但只有用户打开该元素具有更大的zIndex以及您关闭 的事情 上叠加通过点击 点击文档事件，而你检查在点击你是否点击你的事还是境外，在这种情况下，你闭上你 的事 。 无论哪种情况，我都希望使用添加/删
-
当我在片段布局的任何地方单击转到主活动按钮时，单击，如何删除片段中的透明度。
-
我从这里摘取了一些代码，允许通过单击行上的任何位置来选择JTree行。它在单行选择模式下工作良好。但是，我不确定如何修改它，以便处理多行选择。当用户进行多个选择（例如，在鼠标左键单击一行的同时按住shift或control按钮）时，我如何区分这种情况？
-
我正在做一个简单的待办事项列表。直到现在一切都正常。我研究了几种保存数据的方法（根本没有UI工作），当我开始测试时，我注意到我的列表视图周围有一个蓝色的轮廓，点击一些东西会破坏程序<有两种情况： 1）运行程序- 这是它的图像 我得到的错误是：线程中的异常”JavaFX应用程序线程”java.lang.IndexOutOfBoundsException：长度为1的索引-1越界 然后呢 我有一个Obs
-
我有一个JavaFX应用程序，我想为场景中任何地方的鼠标单击添加一个事件处理程序。下面的方法可以工作，但不完全按照我想要的方式。这里有一个例子来说明问题： 如果单击空空间中的任何位置，将调用方法，但如果单击，则不会调用方法。在我的应用程序中有许多按钮和其他交互元素，因此我需要一种方法来捕获对这些元素的点击，而不必为每个元素手动添加新的处理程序。