d3 draggable svg path line segment
Question
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
solution1
3 ACCPTED 2014-06-24 20:59:14
Well, 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)} ];
solution2
2 2014-06-24 04:11:31
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.com/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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.