拖動後獲取點信息

Question

在IPython筆記本中有令人驚歎的mpld3用於交互式matplotlib圖。 mpld3還具有插件功能。其中一個對我來說特別有趣：你可以在圖中選擇一個點並拖動它 - 它在這裏展示：

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

鏈接中的源代碼生成下面的圖。 我想從插入我已經把我的觀點拖回來的信息。但是我真的迷失在javascript部分，我怎麼能從中獲得信息。

Answer 1

我想知道這件事，希望做類似的事情。這是我發現的。首先，我想知道鼠標座標是。爲了能夠閱讀的座標，我插入下面的「警告」聲明，類似於「打印」，在drag_points.py：

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（在同一目錄「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」使得而不是打開一個警告框，它修改了「輸入」值的值從「後」，以endx-startx的，也就是說，

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

最終的結果是，當球被拖動並釋放，警告框顯示x位移，這個值用於更新「輸入」按鈕的值，如果除輸入按鈕以外的其他標籤用於設置該值，應該可以將u向下遊傾斜信息。