无法使用 d3.js 显示 JSON 地图答案

【问题标题】：Unable to display a JSON map using d3.js无法使用 d3.js 显示 JSON 地图
【发布时间】：2018-07-18 12:37:29
【问题描述】：

我正在尝试使用 d3.js 显示 JSON 地图，但浏览器上没有显示任何内容。

JSON文件有以下内容：

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

而我的html文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geoEquirectangular()
                .center([-30, -17 ])
                .scale(3000)
                .rotate([-180,0]);

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

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

            var g = svg.append("g");

            d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CYP.geo.json", function (topology, error) {
                g.selectAll("path")
                    .data(topology.features)
                    .enter()
                    .append("path")
                    .attr("d", path);
            });
        </script>
    </body>
</html>

有什么想法我可能做错了吗？

【问题讨论】：

标签： javascript html json d3.js

【解决方案1】：

您的比例和中心点似乎有问题。根据 d3-geo API，有 fitSize 方法，它可以让您轻松地将投影放置在容器内。

这是一个带有（数据在其中硬编码）的sn-p：

var data ={  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

  
var width = 960,
height = 500;

var projection = d3.geoEquirectangular().fitSize([width, height], data); // adding fitSize method instead of center and scale.


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

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

var g = svg.append("g");

    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：