D3 GeoJSON只渲染矩形中的部分地图

Question

目前我正在进行一个D3项目，用GeoJSON渲染地图。我在网上找到了这个很好的例子https://bl.ocks.org/john-guerra/43c7656821069d00dcbc

并尝试用我的GeoJSON映射实现，而当我根据新的JSON文件编辑参数时，html只呈现了部分映射并显示在矩形中。我试着检查代码，但不知道哪里出了问题。请分享一些我可以正确显示地图的提示。完整的代码可以在git上找到https://github.com/gracemagy/singapore-map-D3

提前谢谢！

这是我从原始脚本编辑的代码：

更新了目标JSON文件名

d3.json('electoral-boundary-dataset.geo.json', function(error, mapData) {
var features = mapData.features;

d.属性.NOMBRE_DPT到d.属性.Name

function nameFn(d){
return d && d.properties ? d.properties.Name : null;
}

缩放(1500(到缩放(50(以缩小地图

var projection = d3.geo.mercator()
.scale(50)

Answer 1

在我看来，您的geoJSON可能有问题这就像它在地图周围有一个框架，也许这就是你所看到的正方形；none"；画出笔划，你可以看到你的地图在这个大的正方形框架内看起来很小

正如@andrewreid评论的那样，这似乎是一个曲折的问题。查看他对原始答案的评论

使用这个bl.ock中的geoJSON，我可以制作这个例子：

https://observablehq.com/d/21415ae86b8e5610

这并不是你想要的一切，但至少显示了地图。注意它是如何使用将所有内容都放入宽度和高度的投影的

var projection = d3.geoMercator().fitSize([width, height], geoJSON);

另外，尽量不要使用d3.v3，太旧了。

这是一个工作版本：

https://observablehq.com/@john guerra/geojson singapur