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

Question

数据 map “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，但这需要一个完整的 topojson 文件，我不需要更新该文件。 非常感谢任何帮助!

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"}
}