javascript - 在 d3.js 中如何创建用于投影的动态比例值？

Question

我是 d3.js 的初学者。我使用 d3.js 创建了一个 geomap。我的 map 工作正常，但我在缩放方面遇到了一些问题。

我需要全屏显示我的 map 窗口。

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

  // 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(); 使用屏幕的当前宽度来绘制 map

所以我的问题是如何全屏拉伸(stretch)我的 map 。

缩放之前的结果屏幕(未使用任何缩放)

缩放后的结果屏幕(使用缩放(200)进行拉伸(stretch))

缩放代码部分

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

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

请帮我解决。

提前致谢。

Answer 1

我使用类似的屏幕尺寸:

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

也许创建一个 JSFiddle 可以帮助人们更轻松地解决您的问题:)