D3.js中绘制线条的实时演示

Question

我刚开始学习D3.js，想要创建类似于在画图中绘制线条的效果。步骤应该如下： - 在屏幕上点击一个点 - 拖动到目的地以创建一条线。

现在我遇到的问题是当您拖动鼠标到目的地时，线条应随着鼠标移动。我该怎么做呢？

谢谢。

- wayne

---

你能否将你的代码示例放到 http://jsbin.com/ 或 jsfiddle 上，这样我们就可以看到它目前的运行情况了吗？ - ne8il

没有代码很难看到你正在寻找什么，但是这段代码基本上可以实现拖动（还有其他一些你可能不需要的函数，但值得一看）。 - Barnabé Monnot

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

- Yony