javascript - 如何使这个 d3-map 响应？

Question

我试过分配不同的变体，但没有任何效果。我希望地图根据窗口大小进行缩放。对 D3 来说非常新，所以一定要知道如何破解这个坚果。我想我需要重新计算宽度和高度，但是如何以及在哪里？

我已经搜索过，但似乎有很多方法，但没有人为我解决问题。非常感谢这里的任何输入。

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

标签： javascriptd3.js