9

私は D3.js を使い始めたばかりで、ペイントで線を描くのと同じようなものを作成したいと考えています。手順は同じです。 - 画面上の点をクリックします - 移動先までドラッグして線を作成します。

私が今問題を抱えているのは、マウスを移動先にドラッグすると、マウスに合わせて線が移動するはずです。どうやってやるの?

ありがとう。

4

1 に答える 1

27

簡単な例を次に示します。ライブバージョンも参照してください。

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、現在の行を選択し、現在のマウスの位置に基づいて目的のポイントを調整するイベント ハンドラーにあると思います。余分な処理を避けるためにのみ有効mousemoveにすることに注意してください。mousedown

于 2013-08-16T17:53:52.147 に答える