CODEWITHSUNDEEP
svgdrag-and-dropd3.jsmove
Thorsten Niehues
Thorsten Niehues

Reputation: 14422

How To Move (Drag and Drop) multiple Shapes with D3

How do I move (drag and drop) multiple shapes with d3.

I tried putting some shapes in a svg and move the svg - this works but not smoothly. This is what I got so far

<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<title>Creating SVG groups with D3.js</title>
</head>
<body>
<script type="text/javascript">

// http://tutorials.jenkov.com/svg/g-element.html

d3image = d3.select("body");

svgcanvas = d3image.append("svg:svg").attr("width", 700).attr("height", 500);

svg1 = svgcanvas.append("svg:svg").attr("x", 100).attr("y", 100);

circle1 = svg1.append("svg:circle")
.attr("cx", 40)
.attr("cy", 40)
.attr("r", 37.5)
.call(d3.behavior.drag().on("drag", move));

rect1 = svg1.append("svg:rect")
.attr("x",0)
.attr("y",50)
.attr("width",100)
.attr("height",75)
.call(d3.behavior.drag().on("drag", move));

text1 = svg1.append("svg:text")
.text("Group 1")
.attr("x", 0)
.attr("y", 70)
.style("stroke", "orange")
.style("stroke-width", 1)
.style("font-size", "150%")
.style("fill", "orange")
.call(d3.behavior.drag().on("drag", move));

function move(){
    var parent = d3.select(this.parentNode);
    parent.attr("x", function(){return d3.event.dx + parseInt(parent.attr("x"))})
            .attr("y", function(){return d3.event.dy +             parseInt(parent.attr("y"))});
};

</script>
</body>
</html>

Any suggestions?

Upvotes: 4

Views: 12063

Answers (2)

Pablo Navarro
Pablo Navarro

Reputation: 8264

You could try fixing the position of the svg element, create a group under it and translate the group when any of the object is dragged. In this question you can find more details about this approach:

SVG dragging for group

Upvotes: 1

Jason Davies
Jason Davies

Reputation: 4693

The drag behaviour needs to be called on the selection whose position you're updating during the drag. In your code, you are updating the position of the parent node, which causes strange "jittering", because the drag position is itself relative to the parent node.

For example, you could replace your move function above with:

function move() {
  d3.select(this)
      .attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}

Upvotes: 5

Related Questions