Live drawing of a line in D3.js [closed]

Question

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?

Thanks.

Parisian

Could you put an example of your code onto jsbin.com or jsfiddle so we could see what it's currently doing? – Hellman

Without code it's hard to see exactly what you are looking for but this code pretty much does the dragging (with other functions which you may not need, but worth a look) – Belfast

Answer 1

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);
}

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.

Enthalpy