在D3.js中直播一条线

Question

我刚刚开始使用D3.js,我想创建类似于我们在Paint中绘制线条的东西.步骤应该相同: - 单击屏幕上的某个点 - 拖动到目标以创建一条线.

我现在遇到麻烦的是当你将鼠标拖到目的地时,该线应该根据你的鼠标移动.我怎样才能做到这一点？

谢谢.

Answer 1

这是一个简单的例子.另见现场版.

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避免多余的处理.