Question

我将使用here中的基本示例，除非我需要能够根据新数据（json文件）更新地图。我找不到直接在内部加载数据的方法Datamap对象，所以我用D3.json加载它并使用命令更新地图。由于某种原因，popupTemplate函数正在接收空数据对象，我不知道如何修复它。

最好的方法是什么？

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<script>
    var data;

    var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: '#FFFFFF',
            defaultFill: 'green'
        },
        geographyConfig: {
            popupTemplate: function(geo, data) {
                console.log(data)
                return ['<div class="hoverinfo"><strong>',
                    'Number of things in ' + geo.properties.name,
                    ': ' + data[geo.id].numberOfThings,
                    '</strong></div>'].join('');
            }
        }
    });
    map.legend();


    d3.json("path/to/data.json", function(error, json) {
        if (error) return console.warn(error);

        data = json;
        map.updateChoropleth(data);
    });
</script>

这是我的json文件：

{
    "IRL": {
        "fillKey": "LOW",
        "numberOfThings": "2002"
    },
    "USA": {
        "fillKey": "MEDIUM",
       "numberOfThings": "10381"
    }
}

为了便于调试，我提出了jsfiddle

Answer 1

我没有在Datamap中直接加载数据的问题。在任何情况下，我还模拟了数据更新......颜色得到更新但不是值（numberOfThings）。在本教程的示例中，不清楚这是否可以完成，尽管人们应该能够更新值。

我将离开你，FIDDLE显示我的实验结果。

几点说明：

我相信你的弹出窗口没有显示，因为它的返回字符串需要是data.numberOfThings。
如果我之前没有弄错，如果您没有国家/地区的数据，则弹出窗口不会更新，并且会显示与上一个有数据的国家/地区相同的值。

Answer 2

@Kiarash，这里有两个问题：

您正在使用datamaps.github.io网站上的数据地图，我不建议这样做，因为我无法保证可靠性（正常运行时间）或向后兼容性。您最好从Github project page
data没有包含国家/地区名称的媒体资源，应该像data.numberOfThings一样访问。

Here is a working version of the code you supplied

使用新数据启动D3.js数据映射

2 个答案: