数据映射错误：“未捕获的类型错误：无法读取未定义的属性 'equirectangular'”

Question

// 您好，我正在尝试使用 Datamaps、D3.js 和 Topojson 创建世界地图。 以下代码摘自我的 index.html 文件，根据我在此页面上遵循的说明，理论上应该生成此地图： https : //github.com/markmarkoh/datamaps/blob/master/README.md ＃入门

// 下面是我的依赖项，后面是我试图创建的“新数据映射”对象。 当我运行它时，我在控制台中收到错误“未捕获的类型错误：无法读取未定义的属性 'equirectangular'”。 我的 CDN 或变量声明是否存在某种错误？

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.abw.min.js"></script>

<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        projection: 'mercator',
        responsive: true,
        fills: {
        defaultFill: "#ABDDA4",
        authorHasTraveledTo: "#fa0fa0"
        },
        data: {
        USA: { fillKey: "authorHasTraveledTo" },
        JPN: { fillKey: "authorHasTraveledTo" },
        ITA: { fillKey: "authorHasTraveledTo" },
        CRI: { fillKey: "authorHasTraveledTo" },
        KOR: { fillKey: "authorHasTraveledTo" },
        DEU: { fillKey: "authorHasTraveledTo" },
        },
        geographyConfig: {
          popupTemplate: function(geo, data) {
                return ['<div class="hoverinfo"><strong>',
                        'Number of things in ' + geo.properties.name,
                        ': ' + data.numberOfThings,
                        '</strong></div>'].join('');
            },
          borderColor: '#444',
          borderWidth: 1,
          borderOpacity: 1,
          dataUrl: 'http://datamaps.github.io/scripts/0.4.4/datamaps.world.min.js'
          //dataJson: topoJsonData
        }
    });

// 我相信这可能是我的 CDN 的导入和/或版本问题，因为我已经尝试导入不同的版本。

Answer 1

显然，数据映射适用于 d3.v3，但不适用于 v4 v5