9

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.

wayne
  • 191
  • 1
  • 1
  • 9
  • Could you put an example of your code onto http://jsbin.com/ or jsfiddle so we could see what it's currently doing? – ne8il Aug 16 '13 at 13:17
  • Without code it's hard to see exactly what you are looking for but [this code](https://gist.github.com/benzguo/4370043) pretty much does the dragging (with other functions which you may not need, but worth a look) – Barnabé Monnot Aug 16 '13 at 13:46

1 Answers1

27

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.

Yony
  • 1,264
  • 1
  • 10
  • 19