Datamap 插件不显示地图

Question

我正在尝试显示基于 Datamaps 插件的法国地图。我尝试了所有尝试，但都没有成功。

这是我的 HTML :

<div id="container"></div>

这是我的 js :

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="../../../node_modules/datamaps/dist/datamaps.fra.min.js"></script>

<script>
        var map = new Datamap({
            element: document.getElementById('container'),
            geographyConfig: {
                dataUrl: null,
                //dataUrl: "../../assets/script/fra.topo.json",
                popupOnHover: true,
                highlightOnHover: true,
                borderColor: '#444',
                borderWidth: 0.5,
            },
            scope: 'fra',
            fills: {
                'MAJOR': '#306596',
                'MEDIUM': '#0fa0fa',
                'MINOR': '#bada55',
                defaultFill: '#dddddd'
            },
            setProjection: function (element) {
                var projection = d3.geo.mercator()
                    .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
                    .scale(1000);
                var path = d3.geo.path().projection(projection);
                return {
                    path: path,
                    projection: projection
                };
            }
        });
</script>

当我检查页面并检查它时，我看到一个 svg wut 页面是空的（下图） enter image description here

Answer 1

您似乎将地图的中心设置在了错误的位置，因为您只使用了 FRA（法国）数据。中心应该约为 2, 46 而不是 78.9629, 23.5937。第一个值是经度，然后是纬度。

var projection = d3.geo.mercator()
    .center([2.0, 46.0])
    .scale(1000);

Datamap 插件不显示地图

Datamap plugin does not show the map

javascript

datamaps