Datamap Error: "Uncaught TypeError: Cannot read property 'equirectangular' of undefined"

Question

// Hello, I am attempting to create a world map using Datamaps, D3.js, and Topojson. The following code is an excerpt from my index.html file which in theory should produce this map, per the instructions I've followed on this page: https://github.com/markmarkoh/datamaps/blob/master/README.md#getting-started

// Below are my dependencies followed by the "new Datamap" object I am attempting to create. When I run this, I get the error "Uncaught TypeError: Cannot read property 'equirectangular' of undefined" in the console. Is there some sort of error with my CDNs or with the variable declaration?

<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
        }
    });

// I believe this may be an import and/or version issue with my CDNs, as I've tried importing different versions.

Answer 1

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