title: D3 donut chart text centering
body: <p>I'm using a d3 donut chart for a project and I'm having issues centering the text inside the donut. I found a piece of code that I have modifying, but frankly I don't understand it much. </p>
  
  <p>I have added the text in the center, but it's not quite centered. Is there anyone that could help me center it? I tried adding 'margin-top' to bring it down but that doesn't work, nor do a lot of css things I tried.   </p>
  
  <p>Here's the specific part that attaches the text:</p>
  
  <pre><code> svg.append("text")
         .attr({
           "text-anchor": "middle",
         }).style({'fill': 'red', 'font-size': '18px'}).text(calories);
  };
  </code></pre>
  
  <p>Codepen:
  <a href="http://codepen.io/anon/pen/xwwBBm" rel="noreferrer">http://codepen.io/anon/pen/xwwBBm</a></p>