D3中荷兰的自定义数据地图

custom datamap of the Netherlands in D3

本文关键字：自定义 数据 地图 D3      更新时间：2023-09-26

我想在我的网站上添加荷兰各省的数据地图。然而，我以前从未使用过自定义数据映射。我相信我有正确的数据格式（geoJSON）。我把它复制到记事本中并保存为geo_netherland.json.

我试着加载这样的数据图：

var map = new Datamap({
    element: document.getElementById('map_netherlands'),
    geographyConfig: {
        dataUrl: 'data/geo_netherlands.json'
    }
});

导致

TypeError: a is null

这是什么意思？调用Datamap时是否应该提供更多参数，json文件是否不好？

您非常接近，但绘制此地图还需要一些参数。

第一个问题是您正在使用dataUrl，但试图访问本地数据。您实际上应该使用dataJson（未记录）。

其次，您需要通过scope参数指定TopoJSON中要使用的几何体。看看您生成的TopoJSON，它恰好是"集合"。

您还需要给容器一个宽度和高度，这样映射就有一些空间可以绘制（否则height在HTML中默认为0）。

最后，你需要设置一个自定义投影，将地图聚焦在荷兰并放大

所有这些加在一起，JS看起来像：

var map = new Datamap({
        element: document.getElementById('map_netherlands'),
        scope: "collection",
        geographyConfig: {
            dataJson: data
        },
       setProjection: function(element) {
       var projection = d3.geo.mercator()
         .scale(3000)
         .center([0, 52])
         .rotate([-4.8, 0])
         .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
      var path = d3.geo.path()
         .projection(projection);
      return {path: path, projection: projection};
     },
    });

有关设置项目和生成自定义数据的详细信息，我建议：http://bost.ocks.org/mike/map/

我强烈建议您查看Bostock的帖子，尤其是他生成TopoJSON并指定--id-property的帖子，这对于您针对任何特定地区（例如创建choropleth）都是必要的。

正在工作的JSFiddle在这里：http://jsfiddle.net/L767kzpy/4/

相关文章：