Question

无论窗口大小如何，我都希望地图和文本都在窗口中居中

我下面显示了一个动画滑块图。映射中的所有内容都是由DIV发起的，这些DIV可以使用基础HTML / CSS重新定位。

地图本身使用javascript显示，并且定位基于以下代码。

var width = 960，高度= 800;

var mapPath = "https://gist.githubusercontent.com/dyavromEPA/5e4f3b99c2162466a7c66767937419de/raw/8e176a7e65c48266e9a4fb795292019fcbe2e54b/usa.json";

// Define the div for the tooltip
var div = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

var projection = d3.geo.albersUsa()
  .scale(950)
  .translate([width/1.1, height/.95]);

总体目标是使地图和文本全部加载到浏览器窗口的中间（现在右移到左侧）。

对于文本：我可以通过将CSS更改为left：50％而不是px数量来成功完成此操作。

  #title {
    position: absolute;
    top: 35px;
    left: 50%;;
      transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 35px;
  }

但是，我该如何在地图上执行类似的操作，因为它是由javascript调用的，并且地图的定位是由.translate（）完成的。我尝试重新计算.translate（），但无法正常工作

查看此问题的最简单方法是通过链接，我将所有内容托管在bl.ocks上。

https://next.plnkr.co/plunk/Ov8dHR7jI09aTFSU（需要刷新plnkr才能开始加载数据）

如何在窗口浏览器中居中放置地图？

0 个答案: