Rysowanie na żywo linii w D3.js

Question

Po prostu zacząłem od D3.js i chcę stworzyć coś takiego, co robimy w programie Paint, aby narysować linię. Kroki powinny być takie same: - Kliknij punkt na ekranie. - Przeciągnij do miejsca docelowego, aby utworzyć linię.

Co mam teraz kłopot, kiedy przeciągniesz mysz do miejsca docelowego, linia powinna poruszać się zgodnie z twoją myszą. Jak mogę to zrobić?

Dzięki.

Answer 1

Oto prosty przykład. Zobacz także 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); 
} 

myślę, że część szukasz znajduje się w przewodnika mousemove zdarzeń gdzie wybrać bieżącą linię i regulować to punkt docelowy na podstawie bieżącego położenia myszy. Zwróć uwagę, że włączamy tylko mousemove w mousedown, aby uniknąć zbędnego przetwarzania.