title: Center align a pie chart on svg
body: <p>I am trying to get a pie chart example to work whereby the position of the chart is centre aligned inside it's containing element, just a simple div in this case set to use 100% width available.</p>
  
  <p>See this <a href="http://jsfiddle.net/2qeab2ds/1/" rel="nofollow">fiddle</a></p>
  
  <p>As you can see the centre of the chart is positioned in the top left corner of the div, rather than using the centre point of the available width and height as per the transform attribute I am setting:</p>
  
  <pre><code>.attr('transform', 'translate(' + width / 2 +  ',' + height / 2 + ')');
  </code></pre>
  
  <p>I am following this example <a href="http://zeroviscosity.com/d3-js-step-by-step/step-1-a-basic-pie-chart" rel="nofollow">here</a>, which uses a hard code width, in my case I am going to end up making it responsive and re-draw on screen resize events. </p>
  
  <p>What am I doing wrong, or missed out altogether, to prevent the chart from being drawn from the centre point of the div\svg area?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>OK, from inspecting the DOM I notice the path's that form each of the pie segments are not children of the svg group (g) element, whereas in other examples I have seen they are. I'm not sure why this is not working correctly in my case, but that seems to be the issue from what I can tell</p>