¿Cómo arrastrar un grupo svg usando el comportamiento de arrastre d3.js?

estoy usandoD3js arrastre. Un solo elemento se arrastra perfectamente bien. Pero quiero arrastrar un grupo de elementos. Cómo se puede hacer. Aquí está lo que está en miJs Fiddle link:

  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);
    }

Quiero arrastrar rect y texto simultáneamente. Esto es lo que yointentó, pero no hay suerte. Creo que me falta algo simple.

Respuestas a la pregunta(2)

Su respuesta a la pregunta