|
|
|
|
@ -1,11 +1,11 @@
|
|
|
|
|
var width = 960;
|
|
|
|
|
var height = 490;
|
|
|
|
|
const width = 960;
|
|
|
|
|
const height = 490;
|
|
|
|
|
|
|
|
|
|
d3.select('svg')
|
|
|
|
|
.attr('width', width)
|
|
|
|
|
.attr('height', height);
|
|
|
|
|
|
|
|
|
|
var worldProjection = d3.geoEquirectangular();
|
|
|
|
|
const worldProjection = d3.geoEquirectangular();
|
|
|
|
|
|
|
|
|
|
d3.select('svg').selectAll('path')
|
|
|
|
|
.data(map_json.features)
|
|
|
|
|
@ -13,12 +13,12 @@ d3.select('svg').selectAll('path')
|
|
|
|
|
.append('path')
|
|
|
|
|
.attr('fill', '#099');
|
|
|
|
|
|
|
|
|
|
var dAttributeFunction = d3.geoPath()
|
|
|
|
|
const dAttributeFunction = d3.geoPath()
|
|
|
|
|
.projection(worldProjection);
|
|
|
|
|
|
|
|
|
|
d3.selectAll('path').attr('d', dAttributeFunction);
|
|
|
|
|
|
|
|
|
|
var dragBehavior = d3.drag() //create a drag behavior
|
|
|
|
|
const dragBehavior = d3.drag() //create a drag behavior
|
|
|
|
|
.on('start', (event) => {
|
|
|
|
|
d3.select('table tr:nth-child(2) td:first-child')
|
|
|
|
|
.html(worldProjection.invert([event.x, event.y])[0])
|
|
|
|
|
|