svg - 在 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事件处理程序中，我们在其中选择当前行并根据当前鼠标位置调整其目标点。请注意，我们仅启用mousemoveinmousedown以避免多余的处理。