D3.js'de bir çizginin canlı çizimi

Question

D3.js ile yeni başladım ve bir çizgi çizmek için Paint'te yaptığımız gibi bir şey yaratmak istiyorum. Adımlar aynı olmalıdır: - Ekranda bir noktaya tıklayın - Bir satır oluşturmak için hedefe sürükleyin.

Şimdi sorun yaşıyorum, farenizi hedefe doğru sürüklediğinizde, satır farenize göre hareket etmelidir. Bunu nasıl yapabilirim?

Teşekkürler.

Answer 1

İşte basit bir örnek. Ayrıca bkz. 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); 
} 

ben aradığınız parçası biz şimdiki satırı seçmek ve geçerli fare yere göre hedef noktası ayarlamak mousemove olay işleyicisi olduğunu düşünüyorum. Gereksiz işlemden kaçınmak için mousedown'da sadece mousemove'u etkinleştirdiğimizi unutmayın.