javascript - D3 数据图 : Pass additional values related to data on click of country

Question

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

'numberOfThings'

在onClick函数内部？

提前致谢。

Answer 1

要设置点击处理程序，您需要使用数据映射的 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)
        }
      })
    }
  })

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