Ive tried allot of different variants, but nothing works. I want the map to scale according to window size. Pretty new to D3 so nut sure how to crack this nut. I guess I need to recalculate the width and height, but how and where?
Ive searched all over but it seems that there are many ways, but no one does the trick for me. Greatly appreciate any input here.
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();