Question

I drew my chart with two dimensions to the width of the window:

var width = (window.innerWidth < 1280) ? 400 : 600,
height = (window.innerWidth < 1280) ? 400 : 500,
radius = Math.min(width, height) / 2;

var arc = d3.svg.arc().innerRadius(radius).outerRadius(radius - 10),
arcFinal = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius - 10),
arcHover = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius);

var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "pie")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");}

What is the best way to update this function in resize event?

Answer 1

Ok, I fixed by adding:

...
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", "0, 0, " + width + ", " + height)
.attr("preserveAspectRatio", "xMinYMin")
...

Then I updated the width and height on resize event