拖动后获取点信息

Question

有一个很棒的工具叫做mpld3，可以在IPython笔记本中制作互动的matplotlib图表。mpld3还有一些插件，其中有一个特别有意思：你可以在图表中选择一个点并拖动它，具体展示可以在这里查看：

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

链接中的源代码生成了下面的图表。我希望能从这个插件中获取我拖动点的新位置的信息。但是我在处理javascript部分时感到很困惑，不知道该如何从中获取信息。

Answer 1

我一直在想这个问题，并且想做一些类似的事情。这是我找到的内容。首先，我想知道鼠标的坐标是什么。为了能够读取这些坐标，我在drag_points.py里插入了一个“alert”语句，类似于“print”：

    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轴上移动的距离。这让我们可以获取坐标信息。

接下来，我测试了能否将这些坐标信息动态地编码到底层的html中，以便进行进一步的后台处理。我了解到d3.js可以让你修改html标签的内容。因此，我修改了_display.py中的“jinja模板”（这个文件和“plugins.py”在同一个目录下）。具体来说，我在模板中输入了以下内容：

<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”，这样它就不再弹出警告框，而是将“input”值从“post”修改为endx-startx。也就是说：

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

最终的结果是，当一个球被拖动并释放时，警告框会显示x轴的位移，这个值会用来更新“input”按钮的值。如果使用除了输入按钮以外的其他标签来设置这个值，应该可以在后续处理中利用这些信息。