Disegno in tempo reale di una linea in D3.js

Question

Ho appena iniziato con D3.js e voglio creare qualcosa di simile a quello che facciamo in Paint per tracciare una linea. I passaggi dovrebbero essere gli stessi: - Fare clic su un punto sullo schermo - Trascinare verso la destinazione per creare una linea.

Quello che sto avendo problemi ora è quando si trascina il mouse sulla destinazione, la linea dovrebbe spostarsi in base al mouse. Come lo posso fare?

Grazie.

Answer 1

Ecco un semplice esempio. Vedi anche live version.

var line; 

var vis = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 400) 
    .on("mousedown", mousedown) 
    .on("mouseup", mouseup); 

function mousedown() { 
    var m = d3.mouse(this); 
    line = vis.append("line") 
     .attr("x1", m[0]) 
     .attr("y1", m[1]) 
     .attr("x2", m[0]) 
     .attr("y2", m[1]); 

    vis.on("mousemove", mousemove); 
} 

function mousemove() { 
    var m = d3.mouse(this); 
    line.attr("x2", m[0]) 
     .attr("y2", m[1]); 
} 

function mouseup() { 
    vis.on("mousemove", null); 
} 

Penso che la parte che stai cercando è nel gestore mousemove evento in cui selezioniamo la riga corrente e regolare è punto di destinazione in base alla posizione corrente del mouse. Si noti che abilitiamo solo mousemove in mousedown per evitare l'elaborazione superflua.