在D3.js中实时绘制一条线 [英] Live drawing of a line in D3.js

问题描述

我刚刚开始使用D3.js，我想创建一个像我们在Paint中画一条线。步骤应该是一样的：
- 点击屏幕上的一个点
- 拖动到目的地创建一行。

I'm just started with D3.js, and I want to create something like what we do in Paint to draw a line. The steps are should be the same: - Click on a point on the screen - Drag to the destination to create a line.

我遇到了麻烦，现在是当你拖动鼠标到目的地，线应该根据你的鼠标移动。

What I'm having troubles now is when you drag your mouse to the destination, the line should move according to your mouse. How can I do that?

感谢。

推荐答案

简单的例子。另请参阅实时版本。

Here's a simple example. Also see 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 事件处理程序，其中我们基于当前鼠标位置选择当前行并调整其目标点。请注意，我们只能在 mousedown 中启用 mousemove ，以避免多余的处理。

I think the part you're looking for is in the mousemove event handler where we select the current line and adjust it's destination point based on the current mouse location. Note that we only enable mousemove in mousedown to avoid superfluous processing.

这篇关于在D3.js中实时绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！