Question

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

我现在遇到的麻烦是当你将鼠标拖到目的地时，该线应该根据你的鼠标移动。我怎么能这样做？

感谢。

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

在D3.js中直播一条线

1 个答案: