Ottieni informazioni sul punto dopo il trascinamento

Question

Esiste l'incredibile mpld3 per i plotter matplotlib interattivi nei taccuini IPython. mpld3 dispone anche di plugin. Uno è particolarmente interessante per me: puoi scegliere un punto nella trama e trascinarlo in giro - è presentato qui:

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

Il codice sorgente nel collegamento genera la trama seguente. Mi piacerebbe avere le informazioni indietro dal plugin dove ho trascinato i miei punti. Ma mi sono davvero perso nella parte javascript e come ho potuto ottenere informazioni da esso.

Answer 1

Mi sono chiesto su questo e ha voluto fare qualcosa di simile. Questo è quello che ho trovato. In primo luogo, volevo sapere che le coordinate del mouse sono. Per essere in grado di leggere le coordinate, ho inserito la seguente dichiarazione "alert", simile a "stampa", in 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) 
    } 

Su clic del mouse e rilasciarlo, si apre un avviso diag con l'X- distanza percorsa. Ciò consente l'accesso alle informazioni sulle coordinate.

Successivamente, ho verificato se sono in grado di codificare dinamicamente queste informazioni sulle coordinate nell'html sottostante, consentendo in tal modo un'ulteriore elaborazione di backend. Ho imparato che d3.js ti consente di modificare il contenuto di un tag html. . Ho quindi modificato i "modelli" di Jinja _display.py (che si trova nella stessa directory di "plugins.py" Nello specifico, ho inserito il seguente nel modello:

<table width=300 height=200 border=5> 
<tr> 
    <form method="POST" action="/plot" class=""> 
    <input type="submit" name="submit" value="PLOT"> 
    </form> 
</tr> 
</table> 

e modificato il "drag_points.py" in modo che invece di aprire una finestra di avviso, è modificato il valore del valore di "ingresso" da "post" per EndX-startx. Cioè,

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

il risultato finale è stato, quando una palla viene trascinato e rilasciato , la casella di avviso visualizza lo spostamento x e questo valore viene utilizzato per aggiornare il valore del pulsante "input". Se si utilizza un altro tag oltre al pulsante di input per impostare il valore, dovrebbe essere possibile tendere le informazioni a valle.