title: How to drag an svg group using d3.js drag behavior?
body: <p>I am using <a href="https://github.com/mbostock/d3/wiki/Drag-Behavior#wiki-on" rel="nofollow noreferrer">D3js drag</a>. single element is get dragged perfectly fine. but i want to drag a group of elements.How it can be done. Here is what is on my <a href="http://jsfiddle.net/xnjGD/1/" rel="nofollow noreferrer">Js Fiddle link</a>:</p>
  
  <pre><code>  function onDragDrop(dragHandler, dropHandler) {
          var drag = d3.behavior.drag();
  
      drag.on("drag", dragHandler)
      .on("dragend", dropHandler);
      return drag;
      }
  
      var g = d3.select("body").select("svg").append("g")
      .data([{ x: 50, y: 50 }]);
  
      g.append("rect")
      .attr("width", 40)
      .attr("height", 40)
      .attr("stroke", "red")
      .attr("fill","transparent")
      .attr("x", function (d) { return d.x; })
      .attr("y", function (d) { return d.y; })
      .call(onDragDrop(dragmove, dropHandler));
  
      g.append("text")
      .text("Any Text")
      .attr("x", function (d) { return d.x; })
      .attr("y", function (d) { return d.y; })
      .call(onDragDrop(dragmove, dropHandler));
  
      function dropHandler(d) {
         // alert('dropped');
      }
  
      function dragmove(d) {
          d3.select(this)
        .attr("x", d.x = d3.event.x)
        .attr("y", d.y = d3.event.y);
      }
  </code></pre>
  
  <p>I want to drag both rect and text simultaneously. Here is what I <a href="http://jsfiddle.net/xnjGD/2/" rel="nofollow noreferrer">tried</a>, but no luck. I think am missing something simple.</p>