拖动后获取点信息 [英] Get point information after dragging

问题描述

在IPython笔记本中，有一个惊人的mpld3用于交互式matplotlib图。 mpld3还具有插件功能。一个对我来说特别有趣：你可以在情节中选择一个点然后拖动它 - 它在这里显示：

There is the amazing mpld3 for interactive matplotlib-plots in IPython Notebooks. mpld3 also features plugins. One is especially interesting for me: You can pick a point in the plot and drag it around - it is presented here:

http://mpld3.github.io/examples/drag_points.html 。

链接中的源代码生成下图。
我想从插件中取回信息，我已经将点数拖到了。但我真的迷失在javascript部分以及如何从中获取信息。

The source code in the link generates the plot below. I would like to have the information back from the plugin where I have dragged my points to. But I really get lost in the javascript part and how I could get information back from it.

推荐答案

我对此感到疑惑并希望做类似的事情。这是我发现的。首先，我想知道鼠标坐标是什么。为了能够读取坐标，我在drag_points.py中插入了以下alert语句，类似于print：

I have wondered about this and wanted to do something similar. This is what I have found. First, I wanted to know the mouse coordinates are. To be able to read the coordinates, I inserted the following "alert" statement, similar to "print", in drag_points.py:

    var startx = 0;
    var starty = 0;
    function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
      d3.select(this).classed("dragging", true);
      startx = obj.ax.x(d[0]);
      starty = obj.ax.y(d[1]);
    }
    var endx = 0;
    var endy = 0;
    function dragended(d) {
      d3.select(this).classed("dragging", false);
      endx = obj.ax.x(d[0]);
      endy = obj.ax.y(d[1]);
      alert(endx-startx);
      d3.select("input")
          .attr("value",endx-startx)
    }

点击并释放鼠标后，它会打开一个行程为x距离的警报诊断。这允许访问坐标信息。

Upon mouse click and release, it opens an alert diag with the x-distance traveled. This allows accessing the coordinate information.

接下来，我测试了我是否可以动态地将这个坐标信息编码到底层的html中，从而允许进一步的后端处理。我了解到d3.js允许您修改html标签的内容。因此我修改了_display.py中的jinja模板（与plugins.py在同一目录中找到。具体来说，我在模板中输入以下内容：

Next, I tested if I can encode this coordinate information into the underlying html dynamically, thus allowing further backend processing. I learned that d3.js allows you to modify the content of an html tag. I therefore modified the "jinja templates" in _display.py (found in the same directory as "plugins.py". Specifically, I entered the following into the template:

<table width=300 height=200 border=5>
<tr>
  <form method="POST" action="/plot" class="">
  <input type="submit" name="submit" value="PLOT">
  </form>
</tr>
</table>

并修改了drag_points.py，以便不打开警告框，它将输入值的值从post修改为endx-startx。即，

and modified the "drag_points.py" so that instead of opening an alert box, it modified the value of the "input" value from "post" to endx-startx. That is,

      d3.select("input")
          .attr("value",endx-startx)

最终结果是，当拖动和释放球时，警告框显示x位移，此值用于更新输入按钮的值。如果使用输入按钮旁边的其他标签来设置值，应该是可能的o利用下游信息。

The end result was, when a ball is dragged and released, the alert box displays the x-displacement and this value is used to update the value of the "input" button. If some other tag besides the input button is used to set the value, it should be possible to utilize the information downstream.

这篇关于拖动后获取点信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！