title: How do I create a single "<g> = group" with the existing "<g> = groups" in D3.js
body: <p>I'm newbie in "d3.js", and I'm trying to implement a "doughnut chart" with some description info in the right side, I have grouped each of them in groups like<code>&lt;g class="device-info"&gt;</code>, and I want all the created groups <code>&lt;g class="device-info"&gt;</code> to be in one group <code>&lt;g class="device-desc"&gt;</code>, but I'm facing trouble to do it, any help will be appreciated.</p>
  
  <p>here is my code:</p>
  
  <pre><code>var colors = ["#249AFF", "#CFDCE5", '#76D3C1']
  
  
  var data1 = {online: 1430,offline:342, test: 200};
  
  var pie = d3.pie()
    .value(function(data1) {return data1.value })
  var data_ready = pie(d3.entries(data1))
  
  var arc = d3.arc()
  .innerRadius(60)
  .outerRadius(70)
  .startAngle(data_ready =&gt; data_ready.startAngle)
  .endAngle(data_ready =&gt; data_ready.endAngle)
  
  var svg = d3.select(".svg")
  .attr('width', 350)
  .attr('height', 220)
  
  svg.selectAll('path')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', (d, i) =&gt; colors[i])
  .attr('stroke', 'none')
  .attr('transform', "translate(100,130)")
  
  
  var groups = svg.selectAll(".groups")
      .data(data_ready)
      .enter()
      .append("g")
      .attr("class", "device-info")
      .attr('transform', ( d, i ) =&gt;  {
         i *= 30
         return `translate(90, ${i})` 
      })
  
  
      groups.append('circle')
      .attr('fill', (d,i) =&gt; colors[i])
      .attr('transform', `translate(147, 0)`)
      .attr('r','5')
      .attr('cx', -20)
      .attr("cy", ( d, i ) =&gt;  {
          return i * 19
      })
  
      groups.append('text')
      .text(data1 =&gt; data1.data.key)
      .attr('fill', function(d,i){ return(colors[i]) })
      .attr('class', 'devices-status')
      .attr('transform', `translate(150, 5)`)
      .style('text-transform', 'capitalize')
      .style('font-size', 14)
      .attr("dx", -15 )
      .attr("dy", ( d, i ) =&gt;  i * 20)
  
  
      groups.append('text')
      .text(data1 =&gt; data1.data.value + " devices")
      .attr('fill', 'white')
      .style('font-size', 15)
      .attr('class', 'devices')
      .attr('transform', `translate(140, 5)`)
      .attr("dx", -15 )
      .attr("dy", ( d, i ) =&gt;  {
          i += 2;
          return i * 12
      })
  
  
      svg.append("text")
      .text('Devices by status')
      .attr('transform' , "translate(10, 25)")
      .style('text-transform', 'uppercase')
      .style('fill', 'rgb(255,255,255)')
      .style('font-size', 15)
  
      svg.append("text")
      .text(`Total devices ${1772}`)
      .attr('transform' , "translate(10, 45)")
      .style('text-transform', 'capitalize')
      .style('fill', 'rgba(255,255,255, .6)')
      .style('font-size', 13)
  
  </code></pre>
  
  <p>and here is a demo: 
  <a href="https://codepen.io/bishuddev/pen/ZEYEyXL?editors=1010" rel="nofollow noreferrer">Click here</a></p>