Карты данных D3 сделали функцию Ссылка - PullRequest
Новая
       65

Карты данных D3 сделали функцию Ссылка

0 голосов
/ 18 ноября 2018

Я хочу, чтобы, если вы щелкнете по ссылке в 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 голосов
/ 18 ноября 2018

try 

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

Edit

Вы должны поместить данные карты-заполнения в отдельную переменную и использовать 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);
      }
    });
  }
});
...