D3 中荷兰的自定义数据图

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，恰好是 "collection".

您还需要为您的容器指定宽度和高度，以便地图有一些 space 可以绘制（否则 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 的 post，尤其是他生成 TopoJSON 并指定 --id-property 的地方，这对于您定位任何特定地区（创建例如等值线）。

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

D3 中荷兰的自定义数据图

custom datamap of the Netherlands in D3

javascript

d3.js

datamaps