Question

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

<!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最小化墨卡托投影

1 个答案: