从数据图的 json 文件加载悬停数据弹出窗口

Question

数据地图“Getting started”页面有一个部分是关于当用户将鼠标悬停在特定国家/地区时自定义文本。但是，他们通过对该信息进行硬编码来做到这一点：

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

我想从外部 .json 文件加载该信息，以便我可以轻松更新它。我怎样才能做到这一点？我试过设置 dataURL，但需要一个完整的拓扑 json 文件，我不需要更新它。非常感谢任何帮助！

Answer 1

dataUrl 在根级别可以采用 json 或 csv 文件，如下例所示：http://bl.ocks.org/markmarkoh/11331459

      var election = new Datamap({
        scope: 'usa',
        element: document.getElementById('container1'),
        geographyConfig: {
          popupTemplate: function(geo, data) {
            return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
          },
          highlightOnHover: false,
          borderColor: '#444',
          borderWidth: 0.5
        },
        dataUrl: 'data.json',
        dataType: 'json',
        data: {},
        fills: {
          'Visited': '#306596',
          'neato': '#0fa0fa',
          'Trouble': '#bada55',
          defaultFill: '#dddddd'
        }
      });

虽然 data.json 的资源看起来像：

{
  "NY": {"fillKey": "Visited", "anotherProperty": "Born here"},
  "TX": {"fillKey": "Visited", "anotherProperty": "Live here"},
  "CA": {"fillKey": "Visited", "anotherProperty": "Here while writing this code"}
}

从数据图的 json 文件加载悬停数据弹出窗口

Load popup on hover data from json file for datamaps

javascript

json

d3.js

datamaps