javascriptd3.jsdatamaps

Datamaps D3 done function Link


I want that if you click to a link in Datamaps (D3), you get to a special Link, but this should be just possible, if the variable blogentries is >0 or is set.

My Code:

<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>

Thx for your help


Solution

  • try

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

    Edit

    You have to put the map-fill-data in a separate variable and use the geography.id to get the value for 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);
          }
        });
      }
    });