I have the task of drawing svg shapes on mousedown using d3. I've been trying to figure out how to make them draggable. I got svg line down (see here) but I actually need to use paths instead. I've gotten pretty close but I'm stumped. Can someone please help me out? Here's some of the code and this is my fiddle.
var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
isDown = false;
m3 = d3.mouse(this);
var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
{x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ];
line.attr('d', lineFunction(newArray));
}
mousedown
pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
line = svg.append('path')
.attr('d', lineFunction(pathArray))
.attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
.call(drag);
mousemove
m2 = d3.mouse(this);
pathArray[1] = {'x': m2[0], 'y': m2[1]};
line.attr('d', lineFunction(pathArray));
I have the task of drawing svg shapes on mousedown using d3. I've been trying to figure out how to make them draggable. I got svg line down (see here) but I actually need to use paths instead. I've gotten pretty close but I'm stumped. Can someone please help me out? Here's some of the code and this is my fiddle.
var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
isDown = false;
m3 = d3.mouse(this);
var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
{x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ];
line.attr('d', lineFunction(newArray));
}
mousedown
pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
line = svg.append('path')
.attr('d', lineFunction(pathArray))
.attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
.call(drag);
mousemove
m2 = d3.mouse(this);
pathArray[1] = {'x': m2[0], 'y': m2[1]};
line.attr('d', lineFunction(pathArray));
2 Answers
Reset to default 4Well, I was super close. This is what I changed in dragmove. It works nicely now.
var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
{x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ];
Here is a path you can drag. It is the same as dragging other types of svg element.
<head>
<script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare./ajax/libs/d3/3.4.6/d3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Draggable SVG Path</h1>
<script>
renderPath();
function renderPath() {
var data = [{
"x": 1,
"y": 5
}, {
"x": 20,
"y": 20
}];
var w = 200;
var h = 200;
var drag = d3.behavior.drag() // <-A
.on("drag", move);
function move(d) {
var x = d3.event.x,
y = d3.event.y;
if (inBoundaries(x, y))
d3.select(this)
.attr("transform", function(d) {
return "translate(" + x + ", " + y + ")";
});
}
// Line creation function configured to do simple linear transformation.
var lineFunction = d3.svg.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
})
.interpolate("linear");
//The SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.call(drag);
function inBoundaries(x, y) {
return (x >= (0 + 5) && x <= (w - 5)) && (y >= (0 + 5) && y <= (h - 5));
}
}
</script>
</body>
</html>