Using ViewBox to resize svg depending on the window size

d3.js, javascript, svg

Solution

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)");

Problem

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/

Original source

Related problems