D3 V6 - Zoom And Drag Functionality
Creating a world map Choropleth with D3 v6 in Angular 7. (trimmed down from Angular into plain JavaScript) Shape files gathered from NaturalEarth and compiled in mapshaper to creat
Solution 1:
Just use d3-zoom for both zooming and panning. Removing drag and zoom from the countries itself fixed it.
functionbuildMap(mapData, data) {
// Grab the container// Append an SVG with world-map as it's ID// Append a g for all of the countriesconst countriesData = data;
const mapContainer = d3.select('#map-container');
const mapRatio = 0.4;
// The plus turns it into a numberconst width = +mapContainer.node().clientWidth;
const height = +mapContainer.node().clientHeight;
// Map and projectionconst projection = d3.geoMercator()
.scale(width / (2 * Math.PI))
.translate([width / 2, height / 2])
// Centered initially ([longitude, latitude])// I move it down a bit cause we do not have antartica apart of our map
.center([0, 45]);
const pathBuilder = d3.geoPath(projection);
// The TooltipconstTooltip = d3.select('body')
.append('div')
.attr('class', 'map-tooltip')
.style('visibility', 'hidden')
.style('background-color', 'white')
.style('border', 'solid')
.style('border-width', '2px')
.style('border-radius', '5px')
.style('padding', '5px')
.style('position', 'absolute')
.on('mouseover', (event) => {
// A bug where if the user's cursor gets on top of the Tooltip, it flashes infinitely until the user's cursor moves// Very distracting and this gets rid of it completely. Besides, the cursor should never be over the Tooltip anywayTooltip.style('visibility', 'hidden');
});
const zoom = d3.zoom()
.on('zoom', (event) => {
map.attr('transform', event.transform);
})
.scaleExtent([1, 40]);
// The Mapconst map = mapContainer
.append('svg')
.attr('padding', 'none')
.attr('height', height)
.attr('width', width)
.attr('border', '1px solid black')
.attr('margin-left', '16px')
.attr('preserveAspectRatio', 'xMinYMin meet')
// This is for when you zoom on the background, it will zoom
.call(zoom)
// This is going to be the country group
.append('g');
map
.selectAll('path')
.data(mapData.features)
.enter()
// This will be the country appended
.append('path')
// Used for clearing out styling later
.classed('country', true)
// Used for selecting specific countries for styling
.attr('id', (feature) => {
return'country' + feature.properties.adm0_a3;
})
// Simple stylings
.attr('opacity', '.7')
.attr('stroke', 'black')
.attr('stroke-width', '.5px')
.attr('d', (feature) => {
// Using the projection, create the polygon for the countryreturnpathBuilder(feature);
})
.attr('fill', (feature) => {
// Change color of the country based upon the countconst country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
returncolorScale(country.count);
} else {
returncolorScale(0);
}
})
// Events are given the event object and the feature object (AKA datum AKA d as it is usually shown in documentation)
.on('mouseover', (event, feature) => {
// This adds the styling to show the user they are hovering over the country
d3.select('#country' + feature.properties.adm0_a3)
.transition()
.duration(200)
.attr('opacity', '1')
.attr('stroke-width', '1px');
// Show the TooltipTooltip.style('visibility', 'visible');
})
.on('mouseleave', (event, feature) => {
// This clears out the remaining styles on all other countries not currently being hovered
d3.selectAll('.country')
.transition()
.duration(200)
.attr('opacity', '0.7')
.attr('stroke-width', '.5px');
// Hide the tooltipTooltip.style('visibility', 'hidden');
})
.on('mousemove', (event, feature) => {
// This adds the tooltip where the user's cursor currently isconst country = countriesData.find(agg => agg.country === feature.properties.admin);
if (country) {
// We have an agg for this country, display name and their countTooltip
.html(feature.properties.admin + '<br>' + 'Count: ' + country.count)
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
} else {
// There is no agg for this country, display name and a 0 countTooltip
.html(feature.properties.admin + '<br>' + 'Count: 0')
.style('left', (event.x + 10) + 'px')
.style('top', (event.y + 10) + 'px');
}
});
}
functioncolorScale(count) {
// Take a count and return one of these:if (count > 20) {
// Redreturn'#ff0000';
// Blue shift// return '#000052';
} elseif (count > 15) {
// Yellowish-redreturn'#ffaa00';
// Blue shift// return '#0000A3';
} elseif (count > 5) {
// Yellowreturn'#ffff00';
// Blue shift// return '#0000F5';
} elseif (count >= 1) {
// Greenish-yellowreturn'#aaff00';
// Blue shift// return '#4747FF';
} else {
// Greenreturn'#00ff00';
// Blue shift// return '#9999FF';
}
}
// This is a GeoJSON file that is thousands of lines long// mapData isn't here because Stackoverflow kept crashing when I tried to paste it in here and review/post the question.
mapData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"admin": "United States of America",
"adm0_a3": "USA"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-94.81758, 49.38905],
[-94.64, 48.84],
[-94.32914, 48.67074],
[-93.63087, 48.60926],
[-92.61, 48.45],
[-91.64, 48.14],
[-90.83, 48.27],
[-89.6, 48.01],
[-89.27291744663668, 48.01980825458284],
[-88.37811418328653, 48.30291758889382],
[-87.43979262330024, 47.94],
[-86.46199083122815, 47.55333801939204],
[-85.65236324740323, 47.22021881773051],
[-84.87607988151485, 46.90008331968238],
[-84.77923824739983, 46.63710195574913],
[-84.54374874544567, 46.53868419044923],
[-84.6049, 46.4396],
[-84.3367, 46.40877],
[-84.1421195136733, 46.51222585711574],
[-84.09185126416148, 46.27541860613826],
[-83.89076534700567, 46.116926988299156],
[-83.6161309475905, 46.116926988299156],
[-83.46955074739463, 45.99468638771259],
[-83.59285071484308, 45.81689362241255],
[-82.55092464875818, 45.34751658790545],
[-82.33776312543108, 44.44],
[-82.13764238150397, 43.57108755144],
[-82.43, 42.98],
[-82.9, 42.43],
[-83.12, 42.08],
[-83.14199968131256, 41.975681057293],
[-83.02981014680694, 41.83279572200601],
[-82.69008928092018, 41.675105088867326],
[-82.43927771679162, 41.675105088867326],
[-81.27774654816707, 42.20902598730686],
[-80.24744767934784, 42.36619985612267],
[-78.9393621487437, 42.86361135514812],
[-78.92, 42.965],
[-79.00999999999988, 43.27],
[-79.17167355011188, 43.46633942318431],
[-78.72027991404238, 43.62508942318496],
[-77.73788509795762, 43.62905558936339],
[-76.82003414580558, 43.628784288093755],
[-76.5, 44.018458893758606],
[-76.375, 44.09631],
[-75.31821, 44.81645],
[-74.867, 45.00048],
[-73.34783, 45.00738],
[-71.50506, 45.0082],
[-71.405, 45.255],
[-71.08482, 45.30524],
[-70.66, 45.46],
[-70.305, 45.915],
[-69.99997, 46.69307],
[-69.237216, 47.447781],
[-68.905, 47.185],
[-68.23444, 47.35486],
[-67.79046, 47.06636],
[-67.79134, 45.70281],
[-67.13741, 45.13753],
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.645475633411, 43.09023834896405],
[-70.81489, 42.8653],
[-70.825, 42.335],
[-70.495, 41.805],
[-70.08, 41.78],
[-70.185, 42.145],
[-69.88497, 41.92283],
[-69.96503, 41.63717],
[-70.64, 41.475],
[-71.12039, 41.49445],
[-71.86, 41.32],
[-72.295, 41.27],
[-72.87643, 41.22065],
[-73.71, 40.93110235165449],
[-72.24126, 41.11948],
[-71.945, 40.93],
[-73.345, 40.63],
[-73.982, 40.628],
[-73.952325, 40.75075],
[-74.25671, 40.47351],
[-73.96244, 40.42763],
[-74.17838, 39.70926],
[-74.90604, 38.93954],
[-74.98041, 39.1964],
[-75.20002, 39.24845],
[-75.52805, 39.4985],
[-75.32, 38.96],
[-75.0718347647898, 38.78203223017928],
[-75.05673, 38.40412],
[-75.37747, 38.01551],
[-75.94023, 37.21689],
[-76.03127, 37.2566],
[-75.72205, 37.93705],
[-76.23287, 38.319215],
[-76.35, 39.15],
[-76.542725, 38.717615],
[-76.32933, 38.08326],
[-76.98999793161354, 38.23999176691339],
[-76.30162, 37.917945],
[-76.25874, 36.9664],
[-75.9718, 36.89726],
[-75.86804, 36.55125],
[-75.72749, 35.55074],
[-76.36318, 34.80854],
[-77.397635, 34.51201],
[-78.05496, 33.92547],
[-78.55435, 33.86133],
[-79.06067, 33.49395],
[-79.20357, 33.15839],
[-80.301325, 32.509355],
[-80.86498, 32.0333],
[-81.33629, 31.44049],
[-81.49042, 30.72999],
[-81.31371, 30.03552],
[-80.98, 29.18],
[-80.535585, 28.47213],
[-80.53, 28.04],
[-80.05653928497756, 26.88],
[-80.088015, 26.205765],
[-80.13156, 25.816775],
[-80.38103, 25.20616],
[-80.68, 25.08],
[-81.17213, 25.20126],
[-81.33, 25.64],
[-81.70999999999981, 25.87],
[-82.24, 26.73],
[-82.70515, 27.49504],
[-82.85526, 27.88624],
[-82.65, 28.55],
[-82.93, 29.1],
[-83.70959, 29.93656],
[-84.1, 30.09],
[-85.10882, 29.63615],
[-85.28784, 29.68612],
[-85.7731, 30.15261],
[-86.4, 30.4],
[-87.53036, 30.27433],
[-88.41782, 30.3849],
[-89.18049, 30.31598],
[-89.59383117841978, 30.15999400483685],
[-89.413735, 29.89419],
[-89.43, 29.48864],
[-89.21767, 29.29108],
[-89.40823, 29.15961],
[-89.77928, 29.30714],
[-90.15463, 29.11743],
[-90.880225, 29.148535],
[-91.626785, 29.677],
[-92.49906, 29.5523],
[-93.22637, 29.78375],
[-93.84842, 29.71363],
[-94.69, 29.48],
[-95.60026, 28.73863],
[-96.59404, 28.30748],
[-97.14, 27.83],
[-97.37, 27.38],
[-97.38, 26.69],
[-97.33, 26.21],
[-97.14, 25.87],
[-97.53, 25.84],
[-98.24, 26.06],
[-99.02, 26.37],
[-99.3, 26.84],
[-99.52, 27.54],
[-100.11, 28.11],
[-100.45584, 28.69612],
[-100.9576, 29.38071],
[-101.6624, 29.7793],
[-102.48, 29.76],
[-103.11, 28.97],
[-103.94, 29.27],
[-104.45697, 29.57196],
[-104.70575, 30.12173],
[-105.03737, 30.64402],
[-105.63159, 31.08383],
[-106.1429, 31.39995],
[-106.50759, 31.75452],
[-108.24, 31.7548537181664],
[-108.24194, 31.34222],
[-109.035, 31.34194],
[-111.02361, 31.33472],
[-113.30498, 32.03914],
[-114.815, 32.52528],
[-114.72139, 32.72083],
[-115.99135, 32.61239],
[-117.12776, 32.53534],
[-117.29593769127388, 33.04622461520389],
[-117.944, 33.621236431201396],
[-118.41060227589749, 33.740909223124504],
[-118.51989482279971, 34.02778157757575],
[-119.081, 34.078],
[-119.43884064201669, 34.3484771782843],
[-120.36778, 34.44711],
[-120.62286, 34.60855],
[-120.74433, 35.15686],
[-121.71457, 36.16153],
[-122.54747, 37.55176],
[-122.51201, 37.78339],
[-122.95319, 38.11371],
[-123.7272, 38.95166],
[-123.86517, 39.76699],
[-124.39807, 40.3132],
[-124.17886, 41.14202],
[-124.2137, 41.99964],
[-124.53284, 42.76599],
[-124.14214, 43.70838],
[-124.020535, 44.615895],
[-123.89893, 45.52341],
[-124.079635, 46.86475],
[-124.39567, 47.72017],
[-124.68721008300783, 48.18443298339855],
[-124.56610107421876, 48.3797149658204],
[-123.12, 48.04],
[-122.58736, 47.096],
[-122.34, 47.36],
[-122.5, 48.18],
[-122.84, 49.],
[-120, 49.],
[-117.03121, 49.],
[-116.04818, 49.],
[-113, 49.],
[-110.05, 49.],
[-107.05, 49.],
[-104.04826, 48.99986],
[-100.65, 49.],
[-97.22872, 49.0007],
[-95.15906950917196, 49.],
[-95.15609, 49.38425],
[-94.81758, 49.38905]
]
],
[
[
[-155.06779029032424, 71.1477763943237],
[-154.34416520894123, 70.6964085964702],
[-153.90000627339262, 70.8899885118357],
[-152.2100060699353, 70.82999217394485],
[-152.27000240782615, 70.60000621202985],
[-150.73999243874454, 70.43001658800571],
[-149.72000301816752, 70.53001048449045],
[-147.61336157935708, 70.2140349392418],
[-145.6899898002253, 70.12000967068676],
[-144.92001095907642, 69.9899917670405],
[-143.5894461804252, 70.15251414659832],
[-142.07251034871342, 69.85193817817265],
[-140.98598752156073, 69.71199839952638],
[-140.9859883290049, 69.71199839952638],
[-140.9924987520294, 66.00002859156868],
[-140.99776974812312, 60.30639679629861],
[-140.0129978161531, 60.27683787702759],
[-139.03900042031586, 60.000007229240026],
[-138.34089, 59.56211],
[-137.4525, 58.905],
[-136.47972, 59.46389],
[-135.47583, 59.78778],
[-134.945, 59.27056],
[-134.27111, 58.86111],
[-133.35554888220722, 58.410285142645165],
[-132.73042, 57.69289],
[-131.70780999999988, 56.55212],
[-130.00778, 55.91583],
[-129.9799942633583, 55.28499787049722],
[-130.53611018946725, 54.8027534043494],
[-131.08581823797215, 55.17890615500204],
[-131.9672114671423, 55.49777558045906],
[-132.25001074285947, 56.36999624289746],
[-133.53918108435641, 57.17888743756214],
[-134.07806292029605, 58.1230675319669],
[-135.03821103227907, 58.18771474876393],
[-136.62806230995466, 58.21220937767046],
[-137.80000627968604, 58.5],
[-139.867787041413, 59.53776154238915],
[-140.82527381713305, 59.727517401765084],
[-142.57444353556446, 60.08444651960499],
[-143.9588809948799, 59.9991804063234],
[-145.92555681682785, 60.45860972761429],
[-147.11437394914668, 60.88465607364463],
[-148.22430620012767, 60.672989406977166],
[-148.01806555885076, 59.97832896589363],
[-148.5708225168609, 59.914172675203304],
[-149.72785783587585, 59.70565827090556],
[-150.60824337461645, 59.36821116803949],
[-151.71639278868332, 59.15582103131999],
[-151.85943315326716, 59.744984035879604],
[-151.4097190012472, 60.72580272077939],
[-150.34694149473253, 61.03358755150986],
[-150.62111080625698, 61.284424953854455],
[-151.89583919981686, 60.72719798445129],
[-152.5783298410956, 60.06165721296429],
[-154.01917212625762, 59.35027944603428],
[-153.28751135965317, 58.8647276882198],
[-154.2324924387585, 58.14637360293054],
[-155.30749142151024, 57.72779450136633],
[-156.3083347239231, 57.42277435976365],
[-156.55609737854633, 56.979984849670636],
[-158.11721655986776, 56.46360809999419],
[-158.43332129619716, 55.99415355083855],
[-159.60332739971744, 55.56668610292012],
[-160.2897196116342, 55.643580634170576],
[-161.2230476552578, 55.364734605523495],
[-162.23776607974108, 55.02418691672011],
[-163.06944658104638, 54.68973704692717],
[-164.7855692210272, 54.40417308208217],
[-164.94222632552004, 54.57222483989534],
[-163.84833960676568, 55.03943146424612],
[-162.87000139061593, 55.348043117893205],
[-161.80417497459604, 55.89498647727043],
[-160.56360470278116, 56.00805451112504],
[-160.0705598622845, 56.41805532492876],
[-158.68444291891944, 57.01667511659787],
[-158.46109737855394, 57.21692129172888],
[-157.7227703521839, 57.57000051536306],
[-157.55027442119356, 58.32832632103023],
[-157.041674974577, 58.91888458926172],
[-158.19473120830548, 58.61580231386984],
[-158.5172179840231, 58.78778148053732],
[-159.05860612692874, 58.424186102931685],
[-159.71166704001735, 58.93139028587634],
[-159.9812888255002, 58.57254914004164],
[-160.35527116599653, 59.07112335879364],
[-161.35500342511506, 58.670837714260756],
[-161.96889360252635, 58.67166453717738],
[-162.05498653872468, 59.26692536074745],
[-161.87417070213536, 59.6336213242906],
[-162.5180590484921, 59.98972361921391],
[-163.81834143782015, 59.79805573184339],
[-164.66221757714646, 60.26748444278265],
[-165.34638770247483, 60.50749563256241],
[-165.35083187565186, 61.07389516869751],
[-166.12137915755596, 61.500019029376226],
[-165.73445187077053, 62.074996853271806],
[-164.91917863671785, 62.63307648380793],
[-164.56250790103934, 63.14637848576305],
[-163.75333248599702, 63.21944896102377],
[-163.0672244944579, 63.05945872664802],
[-162.26055538638172, 63.54193573674117],
[-161.5344498362486, 63.455816962326764],
[-160.77250668032113, 63.766108100023274],
[-160.95833513084256, 64.22279857040277],
[-161.5180684072122, 64.40278758407531],
[-160.77777767641476, 64.78860382756642],
[-161.39192623598763, 64.77723501246234],
[-162.45305009666885, 64.55944468856822],
[-162.7577860178941, 64.33860545516882],
[-163.5463942128843, 64.5591604681905],
[-164.96082984114517, 64.44694509546885],
[-166.42528825586447, 64.68667206487072],
[-166.84500423893905, 65.08889557561453],
[-168.11056006576717, 65.66999705673675],
[-166.70527116602196, 66.0883177761394],
[-164.4747096425755, 66.5766600612975],
[-163.65251176659564, 66.5766600612975],
[-163.78860165103617, 66.07720734319668],
[-161.67777442121016, 66.11611969671242],
[-162.48971452538, 66.73556509059512],
[-163.71971696679108, 67.1163945583701],
[-164.4309913808565, 67.6163382025778],
[-165.39028683170676, 68.04277212185025],
[-166.76444068099602, 68.35887685817968],
[-166.20470740462662, 68.88303091091618],
[-164.4308105133435, 68.91553538682774],
[-163.16861365461452, 69.3711148139129],
[-162.93056616926202, 69.85806183539927],
[-161.90889726463553, 70.33332998318764],
[-160.9347965159337, 70.44768992784958],
[-159.03917578838715, 70.89164215766894],
[-158.11972286683397, 70.82472117785105],
[-156.58082455139805, 71.35776357694175],
[-155.06779029032424, 71.1477763943237]
]
]
]
}
}, {
"type": "Feature",
"properties": {
"admin": "United Kingdom",
"adm0_a3": "GBR"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.661948614921897, 54.55460317648385],
[-6.197884894220977, 53.86756500916334],
[-6.953730231137996, 54.073702297575636],
[-7.572167934591079, 54.05995636658599],
[-7.366030646178785, 54.595840969452695],
[-7.572167934591079, 55.1316222194549],
[-6.733847011736145, 55.1728600124238],
[-5.661948614921897, 54.55460317648385]
]
],
[
[
[-3.005004848635281, 58.63500010846633],
[-4.073828497728016, 57.55302480735525],
[-3.055001796877661, 57.69001902936095],
[-1.959280564776918, 57.68479970969951],
[-2.219988165689301, 56.87001740175353],
[-3.119003058271118, 55.973793036515474],
[-2.085009324543023, 55.90999848085127],
[-2.005675679673857, 55.80490285035023],
[-1.11499101399221, 54.62498647726539],
[-0.4304849918542, 54.46437612570216],
[0.184981316742039, 53.32501414653103],
[0.469976840831777, 52.92999949809197],
[1.681530795914739, 52.739520168664],
[1.559987827164377, 52.09999848083601],
[1.050561557630914, 51.806760565795685],
[1.449865349950301, 51.28942780212196],
[0.550333693045502, 50.765738837275876],
[-0.78751746255864, 50.77498891865622],
[-2.489997524414377, 50.50001862243124],
[-2.956273972984036, 50.696879991247016],
[-3.617448085942328, 50.22835561787272],
[-4.542507900399244, 50.34183706318566],
[-5.245023159191135, 49.96],
[-5.776566941745301, 50.15967763935682],
[-4.309989793301838, 51.21000112568916],
[-3.414850633142123, 51.42600861266925],
[-3.422719467108323, 51.42684816740609],
[-4.984367234710874, 51.593466091510976],
[-5.267295701508885, 51.99140045837458],
[-4.222346564134853, 52.301355699261364],
[-4.770013393564113, 52.840004991255626],
[-4.579999152026915, 53.49500377055517],
[-3.093830673788659, 53.404547400669685],
[-3.092079637047106, 53.404440822963544],
[-2.945008510744344, 53.984999701546684],
[-3.614700825433034, 54.600936773292574],
[-3.63000545898933, 54.615012925833014],
[-4.844169073903004, 54.790971177786844],
[-5.082526617849226, 55.06160065369937],
[-4.719112107756644, 55.50847260194348],
[-5.047980922862109, 55.78398550070752],
[-5.586397670911139, 55.31114614523682],
[-5.644998745130181, 56.275014960344805],
[-6.149980841486354, 56.78500967063354],
[-5.786824713555291, 57.81884837506465],
[-5.009998745127575, 58.63001333275005],
[-4.211494513353557, 58.55084503847917],
[-3.005004848635281, 58.63500010846633]
]
]
]
}
}]
}
data = [{
"country": "United States of America",
"count": 146
},
{
"country": "Belgium",
"count": 24
}
];
buildMap(mapData, data);<scriptsrc="https://d3js.org/d3.v6.js"></script><pclass="pl-2">
World Map
</p><divid="map-container"class="col-3 m-2 p-0"style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>
Post a Comment for "D3 V6 - Zoom And Drag Functionality"