拖动后获取点信息

IPython Notebooks 中有用于交互式 matplotlib 绘图的令人惊叹的 mpld3。 mpld3 还具有插件功能。其中一个对我来说特别有趣：您可以在图中选择一个点并将其拖动 - 它如下所示：

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

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

我对此感到好奇并想做类似的事情。这是我发现的。首先，我想知道鼠标坐标。为了能够读取坐标，我在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 templates”（与“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 位移，并且该值用于更新“输入”按钮的值。如果使用输入按钮之外​​的其他标签来设置值，则应该可以利用下游的信息。