I am trying to merge two stack posts together to get a line drawing tool working, but am having issues. I want to merge this line drawing example here:
Live drawing of a line in D3.js
(there is a jsfiddle in the first response click "live version"). With the properties in of the circle in this post:
How can I click to add or drag in D3?
(check the jsfiddle in the first response).
What I want is when you draw a line, it can be dragged upon completion. It can also be redrawn upon completion, say by clicking the line and moving it left/right.
Here is my attempt to merge the two posts: http://jsfiddle.net/da37B/291/
I assume the problem is in the mousedown() function:
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])
.style("cursor", "pointer")
.call(drag)
.on("click", click);
vis.on("mousemove", mousemove);
}
As you can see, when the line drags upon a click a new line is created, and it also is not able to be redrawn when clicked upon. Also, the drag is only in the orientation of the line.
