如何使用 D3 最小化墨卡托投影

Question

我想在我的 D3 geojson 地图上最小化格陵兰和南极洲。我该怎么做呢。我试过缩放和平移方法，但它们只是在页面上四处移动地图而不提供最小化的 y 坐标。

image of map

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.v3.js"></script>
  <script src="topojson.min.js"></script>
    <style>
    </style>
    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";
        var margin = 75,
            width = 1920 - margin,
            height = 1080 - margin;

        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class', 'map');

        var projection = d3.geo.mercator();

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


        var map = svg.selectAll('path')
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', path)
                     .style('fill', 'rgb(9, 157, 217)')
                     .style('stroke', 'black')
                     .style('stroke-width', 0.5);

      };
      </script>
  </head>
<body>
  <script type="text/javascript">

    /*
        Use D3 to load the GeoJSON file
    */
    //d3.json("world-topo-min.json", draw);
    d3.json("world_countries.json", draw);

  </script>
</body>
</html>

Answer 1

如果您想即时删除格陵兰岛和南极洲的区域，只需过滤 GeoJSON FeatureCollection，即 geo_data.features。在此数组中，您将找到格陵兰岛 ("id": "GRL") 和南极洲 ("id": "ATA") 的特征。因此，您可以使用数组的 .filter() 方法来摆脱这两个功能，而其余部分保持不变：

 var map = svg.selectAll('path')
   .data(geo_data.features.filter(d => d.id !== "GRL" && d.id !== "ATA))

如何使用 D3 最小化墨卡托投影

How do I minimize mercator projection using D3

geojson

d3.js