拖動后獲取點信息

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位移，該值用於更新“輸入”按鈕的值。 如果使用輸入按鈕之外​​的其他標簽來設置值，則應該可以利用下游信息。