在d3.js中如何为投影创建动态比例值？

Question

d3.js的初学者。我使用geomap创建了d3.js。我的地图工作正常，但我在scaling中遇到了一些问题。

我需要全屏显示我的地图。

所以我使用下面的代码创建。

  // Html Part
  <div id="world-placeholder" style="width:100%;height:auto;">

  </div>

  // Script part for generating SVG
  <script>

        var svg = d3.select('#'+id)
                  .append('svg');

        // Set Width & Hight
        var width = $("svg").parent().width();      
        var height = width/2;                       

        // Set Projection
        var projection = d3.geo.robinson()
            //.scale(100)
            //.scale((width/height)*100)
            .translate([width/2, height/2]);

        // Set Path
        var path = d3.geo.path()        
            .projection(projection);
</script>

基本上我尝试使用$("svg").parent().width();

使用屏幕的当前宽度来绘制地图

所以我的问题是如何全屏拉伸我的地图。

结果屏幕缩放前（未使用任何缩放）

缩放后的结果屏幕（用于拉伸的缩放（200））

扩展代码部分

  var projection = d3.geo.robinson()
            .scale(200)
            .translate([width/2, height/2]);

如何根据窗口大小动态缩放？或以任何其他方式显示所有设备的全屏地图？

请帮我解决。

提前致谢。

Answer 1

我使用类似这样的屏幕尺寸：

var GUIWidth = window.innerWidth; //-screen width
var GUIHeight = window.innerHeight; //-screen height

也许创建一个JSFiddle可以帮助人们更轻松地解决问题：）

Answer 2

你甚至可以使用：
document.getElementById("cont").clientHeight and document.getElementById("cont").clientHeight
用于计算容器的动态宽度和高度。在这种情况下，“cont”是一个高度和宽度均为100％的div。