title: d3 drag multiple text elements inside a group SVG
body: <p>I am new to using d3.js.  I am trying to append multiple text elements in a svg group.  With that, I want to be able to drag the group of multiple text.<br>
  So for an example:</p>
  
  <pre><code>    export function testNode (config = {}) {
      let { svg, rectX, rectY, text1, text2 } = config
      var data = [{ x: rectX, y:rectY, label: text1, label2: text2, labelX: rectX + 100, labelY: rectY + 200, labelX2: rectX + 300, labelY2: rectY + 300 }]
          var group = svg.append("g")
                  .selectAll("g")
          .data(data)
          .enter()
                  .append("g")
                  .attr("transform",
                      "translate(" + 0 + "," + 0 + ")")
                  .call(d3.drag()
                      .on("start", dragstarted)
                      .on("drag", dragged)
                      .on("end", dragended));
  
          group.append("text")
                  .data(data)
                  .attr("x", (d) =&gt; { return d.labelX })
                  .attr("y", (d) =&gt; { return d.labelY })
                  .attr("font-size", "1em")
                  .attr("color", "black")
                  .text((d) =&gt; { return d.label });
  
              group.append("text")
                  .data(data)
                  .attr("x", (d) =&gt; { return d.labelX2 })
                  .attr("y", (d) =&gt; { return d.labelY2 })
                  .attr("font-size", ".75em")
                  .attr("color", "black")
                  .attr("class", "label")
                  .text((d) =&gt; { return d.metricValue_01 });
  
  function dragStarted() { 
   d3.select(this).raise().classed("active", true);
  }
  
  function dragged(d) {
  d3.select(this).select("text")
   .attr("x", d.labelX = d3.event.x + 10)
   .attr("y", d.labelY = d3.event.y + 20);
  
  d3.select(this).select("text")
   .attr("x", d.labelX2 = d3.event.x + 10)
   .attr("y", d.labelY2 = d3.event.y + 20);
  
  function dragended() {
      d3.select(this).classed("active", false);
  }
  </code></pre>
  
  <p>If I use the selectAll method, the text gets clumped together. Therefore, I was wondering if I can drag the text group in their proper position based on the coordinate I give it (while being dragged).  Anyways please let me know if I need to provide any further information.  Thank you</p>