title: How To Move (Drag and Drop) multiple Shapes with D3
body: <p>How do I move (drag and drop) multiple shapes with d3.</p>
  
  <p>I tried putting some shapes in a svg and move the svg - this works but not smoothly.
  <a href="http://jsfiddle.net/EHVLs/" rel="nofollow">This is what I got so far</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;Creating SVG groups with D3.js&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  
  // 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"))});
  };
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions?</p>