javascript - D3 Datamaps：在点击国家时传递与数据相关的附加值

Question

我正在使用标记的地图来绘制图表。我想提醒与国家相关的其他值，而不仅仅是国家名称。但是函数内部只有 geography 对象可用onClick。如何访问其他数据，例如

'数量'

内部onClick函数？

提前致谢。

Answer 1

要设置点击处理程序，您需要使用doneDatamaps 的回调。在点击处理程序中，您可以使用id来自地理对象的 引用该map.options.data对象以查找相关数据。

一个工作示例，其中只有美国有一些额外的数据，如下所示：

map = new Datamap({
    scope: 'world',
    element: document.getElementById('container1'),
    projection: 'mercator',
    height: 500,
    fills: {
      defaultFill: '#f0af0a',
      lt50: 'rgba(0,244,244,0.9)',
      gt50: 'red'
    },

    data: {
      USA: {fillKey: 'lt50', numberOfThings: 120132 },
      RUS: {fillKey: 'lt50' },
      CAN: {fillKey: 'lt50' },
      BRA: {fillKey: 'gt50' },
      ARG: {fillKey: 'gt50'},
      COL: {fillKey: 'gt50' },
      AUS: {fillKey: 'gt50' },
      ZAF: {fillKey: 'gt50' },
      MAD: {fillKey: 'gt50' }       
    },

    done: function(map) {

      map.svg.selectAll('.datamaps-subunit').on('click', function(geo) {
        var localData = map.options.data[geo.id]
        if ( localData && localData.numberOfThings ) {
          alert(localData.numberOfThings)
        }
      })
    }
  })

演示链接：http: //jsbin.com/nigifuyeqe/1/edit ?html,output