title: How do I translate a set of svg elements under a g when dragging?
body: <p>JSFiddle: <a href="http://jsfiddle.net/Umugb/19/" rel="nofollow">http://jsfiddle.net/Umugb/19/</a></p>
  
  <p>I've written the code below to drag a set of elements around on an svg. Each <code>g</code> element has a <code>circle</code> that is draggable (but otherwise nothing else is). However, when I drag the circle, I'd like for the rest of the <code>g</code> to translate with it. </p>
  
  <p>The problem is that the dragging goes haywire. If I take out the transform and instead just change the <code>circle</code>'s cx and cy to the new_cx and new_cy, then the circle is movable as expected. However, using transform, all of the elements fly off the page with d3.event.dx/dy of abnormally large absolute values. </p>
  
  <p>Is there anything obviously wrong with the code below? Or does anyone have further insight into why this is happening?</p>
  
  <pre><code>var drag = d3.behavior.drag().on("drag", translate);
  function translate() {
      var g = $("#" + this.parentNode.id);
      var circle = d3.select(this);
      var r  = parseInt(circle.attr("r"));
      var box_width =  Math.max(g[0].getElementsByClassName('circletext')[0].getBBox().width, 2*r);
  
      var cx = parseInt(circle.attr("cx"));
      var cy = parseInt(circle.attr("cy"));
      if (g.attr("transform")) {
          var translate = g.attr("transform").split('translate')[1].split(',');
          cx = cx + parseInt(translate[0].slice(1));
          cy = cy + parseInt(translate[1].slice(0,-1));
      }
  
      var new_cx = Math.max(r, Math.min(width - box_width + r, d3.event.dx + cx));
      var new_cy = Math.max(r, Math.min(height - r, d3.event.dy + cy));
      d3.select("#" + this.parentNode.id).
          attr("transform",
               "translate(" + (new_cx-cx) + "," + (new_cy-cy) + ")");
  </code></pre>
  
  <p>EDIT: Updated with JSFiddle at top</p>