数据映射D3完成功能链接

时间:2018-11-18 15:49:42

标签: javascript d3.js datamaps

我希望,如果您单击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>

感谢您的帮助

1 个答案:

答案 0 :(得分:-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);
      }
    });
  }
});