Question

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

//以下是我的依赖项，后跟我要创建的“新Datamap”对象。运行此命令时，在控制台中收到错误“未捕获的TypeError：无法读取未定义的属性'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

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

1 个答案: