javascript - 拖拽后获取点信息

Question

IPython Notebooks 中有用于交互式 matplotlib-plots 的惊人 mpld3。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 位移，这个值用于更新“输入”按钮的值。如果使用输入按钮以外的其他标签来设置值，则应该可以利用下游的信息。