Question

我想在我的网站上添加荷兰的数据地图。但是之前我从未使用过自定义数据映射。我相信我有正确的data格式（geoJSON）。我通过将其复制到记事本并保存为geo_netherlands.json来保存它。

我尝试像这样加载数据图：

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

导致

TypeError: a is null

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

Answer 1

你非常接近，但是你需要更多的参数来绘制这张地图。

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

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

您还需要为容器指定宽度和高度，以便地图有一些空间可供绘制（否则height默认为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的情况下，这对于你定位任何特定区域（例如创建一个等值区）是必要的。

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

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

1 个答案: