Responsive Donut Chart d3

Question

I have been fiddling with this donut chart for a bit, but it won't render just right using the aspect ratio / viewbox method.

I got this working with a window resize function, but it has a bug -- since the container it can be can be collapsed, it can resize incorrectly. I figure I can work around this, but any tips on getting this to work with the commented out code?

What tends to happen is that based on the original window size the chart has dimensions based on that... which can skew the look if the window is at the wrong size when it starts.

https://jsfiddle.net/7rgf09x1/9/

  // WORK IN PROGRESS: Responsive using only d3.
  //     var svg = d3.select('#revenue-chart').append('svg')
        // .attr('id', 'revenue-chart-render')
  //     .attr("width", '100%')
  // .attr("height", '100%')
  // .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
  // .attr('preserveAspectRatio','xMinYMin')
  // .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

Answer 1

The goal of viewBox is to separate the page coordinates from the graphics coordinates. So .attr('viewBox','0 0 '+width +' '+height) gives you graphics coordinates in [0,width]x[0,height]. This is independent of the size of the svg in the page. You can change the '0 0' in order to have the origin of the graphics coordinates in the center instead of the top-left corner (although your solution with a translated g was valid too). Finally, preserveAspectRatio makes sure that your image isn't stretched by adding padding to the sides as necessary.

So overall this should give you

 var svg = d3.select('#revenue-chart').append('svg')
         .attr('id', 'revenue-chart-render')
         .attr("width", '100%')
         .attr("height", '100%')
         .attr('viewBox',(-width / 2 ) + ' ' + (-height/2) + ' '+width +' '+height)
         .attr('preserveAspectRatio','xMinYMin')