D3.jsでの線のライブ図面

Question

私はD3.jsで始まったばかりです。線を描くためにペイントで行うようなものを作成したいと思います。手順は同じでなければなりません。 - 画面上の点をクリックしてください。 - 目的地までドラッグして線を作成します。

私が今問題を抱えているのは、マウスを目的地にドラッグすると、マウスがマウスに沿って動くはずです。どうやってやるの？

ありがとうございました。

Answer 1

ここに簡単な例があります。 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); 
} 

私は、あなたが探している部分は、我々は現在の行を選択し、それが現在のマウスの位置に基づいて、宛先ポイントの調整mousemoveイベントハンドラであると思います。余分な処理を避けるため、mousedownにmousemoveを有効にするだけです。