title: d3.js v4, adding text labels to bubbles on a bubble chart
body: <p>I'm building a bubble chart. The chart is appearing exactly how I'd like. The only issue I have been having is getting text to appear in the middle of each bubble. </p>
  
  <p>Text is not appearing at all and I have tried several options to get it there. When I inspect the page, inside of each circle there is a text element. However, the element does not appear on the page, although it is nested inside of each circle. I am pasting my code below. All help is greatly appreciated. </p>
  
  <pre><code>let width = 600;
  let height = 600;
  
  let maxRadius = d3.max(data, (data) =&gt; { return data.PercentHomeless; })
  let minRadius = d3.min(data, (data) =&gt; { return data.PercentHomeless; })
  
  let svg = d3.selectAll('section')
             .append('svg')
             .attr('height', height)
             .attr('width', width)
             .append('g')
             .attr('transform', 'translate(0, 0)')
  
  let colors = d3.scaleOrdinal(d3.schemePaired);
  
  let simulation = d3.forceSimulation()
                    .force('x', d3.forceX(width/2).strength(0.5))
                    .force('y', d3.forceY(height/2).strength(0.5))
                    .force('collide', d3.forceCollide((data) =&gt; { return r(data.PercentHomeless) + 1.5; }))
  
  let r = d3.scaleSqrt()
            .domain([minRadius, maxRadius])
            .range([15,75])
  
  let circles = svg.selectAll('circles')
                .data(data)
                .enter()
                .append('circle')
                .attr('fill', (data) =&gt; { return colors(data.State); })
                .attr('r', (data) =&gt; { return r(data.PercentHomeless); })
  
  circles.append('text')
    .attr("dy", ".3em")
    .attr("dx", -10)
    .attr("text-anchor", "middle")
    .text((data) =&gt; { return data.State; })
    .attr('color', 'black')
    .attr('font-size', 15)
  
  
  let ticked = () =&gt; {
    circles
    .attr('cx', (data) =&gt; { return data.x })
    .attr('cy', (data) =&gt; { return data.y })
  }
  
  simulation.nodes(data)
    .on('tick', ticked)
  
  
  });
  </code></pre>