无法缩放我的d3地图

我跟随Bostock的map tutorial与我自己的data。我明白投影是一个函数，它需要一个3D经纬/长坐标并返回一个2D x/y坐标。我也明白，d3.geo.path处理采取GeoJSON并将其转换为SVG的混乱业务。我得到了如何将投影函数作为参数传递给d3.geo.path，以告诉它如何将由GeoJSON描述的3D经纬度投影到2D SVG中。到现在为止还挺好。无法缩放我的d3地图

但是，我在使用我的投影在地图上“放大”了很多麻烦。使用投影的中心属性，地图以适当的经度和纬度为中心。我正在使用投影的translate属性将该点放在SVG元素的中心。但是，不管我用于缩放的数量如何，地图都不会变大或变小。我检查了骨头错误：我正确地保存了更改，并且他们得到正确的服务。这个错误与我如何使用比例有关。

如何放大？

window.onload = function() { 

    //Width and height 
    var width = 960, 
     height = 1160; 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    //setting scale to numbers as high as 30000 and as low as 3 does not change my map 
    var projection = d3.geo.transverseMercator().translate([width/2, height/2]).scale(3).center(-90.088, 29.957); 

    var path = d3.geo.path(projection); 

    d3.json("orleans.json", function(json) { 
     svg.selectAll("path") 
      .data(json.features) 
      .enter() 
      .append("path") 
      .attr("d", path); 
    }); 

};

来源

2014-02-09 bernie2436

d3.geo.path()不带任何参数。要设置投影的路径，使用下面的代码：

var path = d3.geo.path().projection(projection);

来源

2014-02-09 16:07:29

另一种选择要考虑的是使用“preserveAspectRatio”，并在SVG标签“视框”属性（如果你的地图使用一个）：

svg preserveAspectRatio =“xMidYMid meet”viewBox =“0 0 500 200”id =“mapsvg”

通过提高或降低viewbox数字，您可以缩小或放大地图。

来源

2015-04-30 18:33:57 werds

无法缩放我的d3地图

回答

相关问题