Using ViewBox to resize svg depending on the window size

Question

I'm attempting to use ViewBox & preserveAspectRatio to automatically adjust my d3.svg.arc when the window size has changed ...

var svg = d3.select("#chart").append("svg") 
  .append("g")
  .attr("viewBox", "0 0 700 500")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");

I'm a bit confused why it doesn't work at all - I've also attempted to set the preserve to "none" & delete any set margins that I had. yet still no luck - any help or advice would be appreciated.

Here's an example: http://jsfiddle.net/xwZjN/53/

Answer 1

You are applying viewBox and preserveAspectRatio to the g element, they need to be applied to the svg element:

var svg = d3.select("#chart").append("svg") 
  .attr("viewBox", "0 0 700 500")
  .attr("preserveAspectRatio", "xMinYMin meet")
     .append("g")
     .attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");