He intentado adjudicar de diferentes variantes, pero nada funciona. Quiero que el mapa se escale según el tamaño de la ventana. Bastante nuevo en D3, así que estoy seguro de cómo romper esta nuez. Supongo que necesito volver a calcular el ancho y la altura, pero ¿cómo y dónde?

He buscado por todos lados pero parece que hay muchas formas, pero ninguna me soluciona el problema. Agradezco enormemente cualquier entrada aquí.

 var width = Math.max( document.documentElement.clientWidth, window.innerWidth || 0 ), height = Math.max( document.documentElement.clientHeight, window.innerHeight || 0 ); const svg = d3 .select("body") .append("svg") .attr("height", height) .attr("width", width); const projection = d3 .geoAlbers() .center([4, 64.9]) .rotate([-10.4, 0]) .parallels([50, 60]) .scale(4000) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); var data = { 46: { navn: "Vestland", kvinner: 2000, menn: 4000, } function fylkeInfoBlob(fylke) { var kvinner = data[fylke.fylkesnummer].kvinner; var menn = data[fylke.fylkesnummer].menn; var navn = data[fylke.fylkesnummer].navn; var prosent = (100 / (kvinner + menn)) * kvinner; console.log(prosent); return ` <div class="tooltip"> <h2>${navn}</h2> <p>Kvinner: ${kvinner}</p> <p>Menn: ${menn}</p> <p> </div> `; } function mouseOver(d) { const fylke = d.path[0].__data__.properties; d3.select(this) .transition() .duration("50") .attr("opacity", ".5") .attr("class", "hoverfylker"); d3.select(".content").html(fylkeInfoBlob(fylke)); } function mouseOut() { d3.select(".content").text(""); d3.select(this) .transition() .duration("50") .attr("opacity", "1") .attr("class", "fylke"); } const visKart = async () => { const kart = await d3.json("data/map.topojson"); const andel = await d3.json("data/andel.json"); var fylker = topojson.feature(kart, kart.objects.collection); console.log(fylker) const g = svg.append("g"); g.selectAll("path") .data(fylker.features) .enter() .append("path") .attr("class", "fylke") .attr("d", path) .on("mouseover", mouseOver) .on("mouseout", mouseOut); }; visKart();