title: Animating shapes with text anchor in d3.js
body: <p>I am trying to transition a circle to a point on a curve and each circle has a text node within the circle as a child node and I am transitioning the cx,cy position of the circle and I would like the text to transition with it as well but it stays in the center of the svg.</p>
  
  <pre><code>mainLayerGroup.selectAll('.layerG')
    .append('circle')
    .attr('class', 'innerC')
    .attr('cx', 0)
    .attr('cy', 0)
    .attr('fill', 'black')
    .attr('r', layerRadius - 7)
    .transition()
    .duration(1000)
    .delay(500)
    .ease('bounce')
    .attr('cx', function (d, i) {
      return (width / 2 - layerRadius - strokeWidth) * Math.cos((step * i) * Math.PI / 180);})
    .attr('cy', function (d, i) {
      return (width / 2 - layerRadius - strokeWidth) * Math.sin((step * i) * Math.PI / 180);});
  
  mainLayerGroup.selectAll('.layerG')
    .append('text')
    .text(function(d){
      return d;
    })
    .attr("class", "layerTitle")
    .attr("text-anchor", "middle")
    .attr('font-size', '36px')
    .attr('color', 'black');
  </code></pre>
  
  <p><a href="http://jsfiddle.net/shaunwallace/kuv3z/1/" rel="nofollow">here's the fiddle</a></p>
  
  <p>Any help is appreciated and if there are improvements to my current implementation then feedback is also appreciated :-) I am pretty new to d3.js</p>