D3 Datamaps：传递与点击国家/地区数据相关的附加值

Question

我正在使用 mark's maps 绘制图表。我想提醒与国家相关的其他值，而不仅仅是国家名称。但是 onClick 函数中只有地理对象可用。如何访问

等其他数据

'numberOfThings'

在 onClick 函数中？

提前致谢。

Answer 1

要设置点击处理程序，您需要使用 Datamaps 的 done 回调。在点击处理程序中，您可以使用地理对象中的 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)
        }
      })
    }
  })

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

D3 Datamaps：传递与点击国家/地区数据相关的附加值

D3 Datamaps : Pass additional values related to data on click of country

javascript

d3.js

datamaps