拖动后获取点信息

Question

在IPython笔记本中，有一个惊人的mpld3用于交互式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”，以便不是打开警告框，而是将“输入”值的值从“post”修改为endx-startx。也就是说，

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

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