title: D3.js: Dragging everything in group ('g') by element contained in the group using origin() function
body: <p>I am not sure what's going on, but I have 2 very simple examples set up to show what I am asking.</p>
  
  <p>Both examples have a 'g' that contains a 'rect' and 'text'. </p>
  
  <p>In the 1st example, I am setting up drag on the 'g' itself, i.e., if you mousedown anywhere in that group and drag, it will drag the entire thing (both 'rect' and 'text') around the viewpoint.
  <a href="http://jsfiddle.net/wup4d0nx/" rel="nofollow">http://jsfiddle.net/wup4d0nx/</a></p>
  
  <pre><code>var chart = d3.select("body").append("svg")
     .attr("height", 500)
     .attr("width", 500)
     .style("background", "lightgrey");
  
  var group = chart.selectAll("g")
      .data(["Hello"])
      .enter()
      .append("g")
      .attr("id", function (d) { return d;});
  
  var rect = group.append("rect")
      .attr("stroke", "red")
      .attr("fill", "blue")
      .attr("width", 200)
      .attr("height", 200)
      .attr("x", 10)
      .attr("y", 10);
  
  var label = group.append("text")
      .attr("x", 40)
      .attr("y", 40)
      .attr("font-size", "22px")
      .attr("text-anchor", "start")
      .text(function (d) { return d;});
  
  // Set up dragging for the entire group
  var dragMove = function (d) {
      var x = d3.event.x;
      var y = d3.event.y;
      d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
  };
  
  
  var drag = d3.behavior.drag()
      .origin(function (data) {
          var element = d3.select("#" + data);
          return {
              x: d3.transform(element.attr("transform")).translate[0],
              y: d3.transform(element.attr("transform")).translate[1]
          };
      })
      .on("drag", dragMove);
  
  group.call(drag);
  </code></pre>
  
  <p>In the 2nd example, which doesn't work and is what I am interested in, I want ONLY THE TEXT to be something the user can grab to drag the entire group around.</p>
  
  <p>I tried many attempts. Some don't work at all, some work but flicker like the example I provide here:
  <a href="http://jsfiddle.net/9xeo7ehf/" rel="nofollow">http://jsfiddle.net/9xeo7ehf/</a></p>
  
  <pre><code>var chart = d3.select("body").append("svg")
      .attr("height", 500)
      .attr("width", 500)
      .style("background", "lightgrey");
  
  var group = chart.selectAll("g")
      .data(["Hello"])
      .enter()
      .append("g")
      .attr("id", function (d) { return d;});
  
  var rect = group.append("rect")
      .attr("stroke", "red")
      .attr("fill", "blue")
      .attr("width", 200)
      .attr("height", 200)
      .attr("x", 10)
      .attr("y", 10);
  
  var label = group.append("text")
      .attr("x", 40)
      .attr("y", 40)
      .attr("font-size", "22px")
      .attr("text-anchor", "start")
      .text(function (d) { return d;});
  
  // Set up dragging for the entire group USING THE LABEL ONLY TO DRAG
  var dragMove = function (d) {
      var x = d3.event.x;
      var y = d3.event.y;
      d3.select(this.parentNode).attr("transform", "translate(" + x + "," + y + ")");
  };
  
  
  var drag = d3.behavior.drag()
      .origin(function (data) {
          var element = d3.select("#" + data);
          return {
              x: d3.transform(element.attr("transform")).translate[0],
              y: d3.transform(element.attr("transform")).translate[1]
          };
      })
      .on("drag", dragMove);
  
  label.call(drag);
  </code></pre>
  
  <p>What's going on with this that it flickers and what am I doing wrong?</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Thanks!</p>