數據映射D3完成功能鏈接

Question

我希望，如果您單擊到Datamaps（D3）中的鏈接，則會獲得一個特殊的鏈接，但是，如果變量blogentries大於或等於0，則應該可以。

我的代碼：

 <script> var map = new Datamap({ element: document.getElementById('worldmap'), responsive: true, geographyConfig: { highlightOnHover: false, popupOnHover: false }, fills: { 'VISITED': '#13304F', defaultFill: '#d6e5f5' }, data: { 'FIN': { fillKey: 'VISITED', blogentries: 1 }, 'AUT': { fillKey: 'VISITED', blogentries: 1 }, }, done: function(datamap) { datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { if (data.blogentries > 0) { window.location = "https://www.link.com/" + (geography.properties.name); } }); } }); // Pure JavaScript window.addEventListener('resize', function() { map.resize(); }); // Alternatively with d3 d3.select(window).on('resize', function() { map.resize(); }); // Alternatively with jQuery $(window).on('resize', function() { map.resize(); }); </script> 

謝謝你的幫助

Answer 1

嘗試

if (d3.select(geography).datum().blogentries > 0) {
    // ....
}

編輯

您必須將map-fill-data放在一個單獨的變量中，並使用geography.id來獲取blogentries的值

var mapData = {
  'FIN': {
    fillKey: 'VISITED',
    blogentries: 1
  },
  'AUT': {
    fillKey: 'VISITED',
    blogentries: 1
  },
};
var map = new Datamap({
  element: document.getElementById('worldmap'),
  responsive: true,
  geographyConfig: {
    highlightOnHover: false,
    popupOnHover: false
  },
  fills: {
    'VISITED': '#13304F',
    defaultFill: '#d6e5f5'
  },
  data: mapData,
  done: function(datamap) {
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
      if (mapData[geography.id] && mapData[geography.id].blogentries > 0) {
        window.location = "https://www.test.com/" + (geography.properties.name);
      }
    });
  }
});