數據映射錯誤：“未捕獲的類型錯誤：無法讀取未定義的屬性 '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