Responsive D3 js chart

Question

I'm trying to make a D3js chart responsive and can't manage to get it to work. Was wondering you guys could help.

The website is http://www.vizualytic.com/

The d3js chart is on the home page

Answer 1

Set width=100% and height=100% and viewBox and preserveAspectRatio attributes for your SVG elements.

Following solution will give you direction,

var svg = d3.select('#chart').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g") ;