D3 V6 - 缩放和拖动功能

Question

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 create GeoJSON.

Keeping it simple with just countries but I am getting a rubber band effect . When I try to drag the map (whether it be the background or on a specific country), it will try to move where you are dragging but then pop back to it's original position unless you drag your cursor across the screen or quickly release after an event is triggered.

As well, when you zoom in on a specific country and then zoom/drag on a different country, it pops you back to the original zoom when the map is created.

 function buildMap(mapData, data) { // Grab the container // Append an SVG with world-map as it's ID // Append ag for all of the countries console.log('Building the map'); const countriesData = data; const mapContainer = d3.select('#map-container'); const mapRatio = 0.4; // The plus turns it into a number const width = +mapContainer.node().clientWidth; const height = +mapContainer.node().clientHeight; // Map and projection const 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 Tooltip const Tooltip = 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 anyway Tooltip.style('visibility', 'hidden'); }); // The Map const 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 click on the background, it will drag .call(d3.drag() .on('drag', (event) => { map.attr('transform', 'translate(' + [event.dx, event.dy] + ')'); })) // This is for when you zoom on the background, it will zoom .call(d3.zoom() .on('zoom', (event) => { map.attr('transform', event.transform); }) .scaleExtent([1, 40])) // This is going to be the country group .append('g') .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 country return pathBuilder(feature); }) // This is for when you click a country, it will drag .call(d3.drag() .on('drag', (event, feature) => { map.attr('transform', 'translate(' + [event.dx, event.dy] + ')'); })) // This is for when you zoom in on a country, it will zoom .call(d3.zoom() .on('zoom', (event, feature) => { map.attr('transform', event.transform); }) .scaleExtent([1, 40])) .attr('fill', (feature) => { // Change color of the country based upon the count const country = countriesData.find(agg => agg.country === feature.properties.admin); if (country) { return colorScale(country.count); } else { return colorScale(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 Tooltip Tooltip.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 tooltip Tooltip.style('visibility', 'hidden'); }) .on('mousemove', (event, feature) => { // This adds the tooltip where the user's cursor currently is const country = countriesData.find(agg => agg.country === feature.properties.admin); if (country) { // We have an agg for this country, display name and their count Tooltip .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 count Tooltip .html(feature.properties.admin + '<br>' + 'Count: 0') .style('left', (event.x + 10) + 'px') .style('top', (event.y + 10) + 'px'); } }); } function colorScale(count) { // Take a count and return one of these: if (count > 20) { // Red return '#ff0000'; // Blue shift // return '#000052'; } else if (count > 15) { // Yellowish-red return '#ffaa00'; // Blue shift // return '#0000A3'; } else if (count > 5) { // Yellow return '#ffff00'; // Blue shift // return '#0000F5'; } else if (count >= 1) { // Greenish-yellow return '#aaff00'; // Blue shift // return '#4747FF'; } else { // Green return '#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":[[[[-155.54211,19.08348],[-155.68817,18.91619],[-155.93665,19.05939],[-155.90806,19.33888],[-156.07347,19.70294],[-156.02368,19.81422],[-155.85008,19.97729],[-155.91907,20.17395],[-155.86108,20.26721],[-155.78505,20.2487],[-155.40214,20.07975],[-155.22452,19.99302],[-155.06226,19.8591],[-154.80741,19.50871],[-154.83147,19.45328],[-155.22217,19.23972],[-155.54211,19.08348]]],[[[-156.07926,20.64397],[-156.41445,20.57241],[-156.58673,20.783],[-156.70167,20.8643],[-156.71055,20.92676],[-156.61258,21.01249],[-156.25711,20.91745],[-155.99566,20.76404],[-156.07926,20.64397]]],[[[-156.75824,21.17684],[-156.78933,21.06873],[-157.32521,21.09777],[-157.25027,21.21958],[-156.75824,21.17684]]],[[[-157.65283,21.32217],[-157.70703,21.26442],[-157.7786,21.27729],[-158.12667,21.31244],[-158.2538,21.53919],[-158.29265,21.57912],[-158.0252,21.71696],[-157.94161,21.65272],[-157.65283,21.32217]]],[[[-159.34512,21.982],[-159.46372,21.88299],[-159.80051,22.06533],[-159.74877,22.1382],[-159.5962,22.23618],[-159.36569,22.21494],[-159.34512,21.982]]],[[[-94.81758,49.38905],[-94.63999999999987,48.84000000000012],[-94.32914,48.67074000000011],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.82999999999986,48.27],[-89.6,48.010000000000105],[-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.40877000000011],[-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.9800000000001],[-82.89999999999989,42.43000000000015],[-83.11999999999989,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.816450000000174],[-74.867,45.000480000000124],[-73.34783,45.00738],[-71.50505999999987,45.0082000000001],[-71.405,45.25500000000014],[-71.08482,45.30524000000017],[-70.6599999999998,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.70281000000014],[-67.13741,45.13753],[-66.96466,44.80970000000016],[-68.03252,44.3252],[-69.05999999999989,43.98],[-70.11617,43.684050000000155],[-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.92283000000012],[-69.96503,41.63717000000017],[-70.64,41.475],[-71.12039,41.49445000000017],[-71.85999999999984,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.93110235165449],[-72.24126,41.11948000000015],[-71.94499999999982,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.248450000000105],[-75.52805,39.4985],[-75.32,38.96],[-75.0718347647898,38.78203223017928],[-75.05673,38.40412000000012],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72204999999978,37.93705000000011],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.71761500000011],[-76.32933,38.08326],[-76.98999793161354,38.23999176691339],[-76.30162,37.917945],[-76.25874,36.96640000000011],[-75.9718,36.89726],[-75.86803999999984,36.55125],[-75.72749,35.55074000000013],[-76.36318,34.80854000000013],[-77.39763499999988,34.51201],[-78.05496,33.92547],[-78.55434999999983,33.86133000000012],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999000000013],[-81.31371,30.035520000000105],[-80.98,29.180000000000117],[-80.53558499999988,28.47213],[-80.5299999999998,28.040000000000106],[-80.05653928497756,26.880000000000138],[-80.088015,26.205765],[-80.13155999999987,25.816775],[-80.38103,25.20616],[-80.67999999999988,25.08],[-81.17213,25.201260000000133],[-81.33,25.64],[-81.70999999999981,25.87],[-82.24,26.730000000000132],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.550000000000153],[-82.92999999999988,29.100000000000136],[-83.70959,29.93656],[-84.1,30.090000000000117],[-85.10882,29.63615],[-85.28784,29.68612000000013],[-85.7731,30.152610000000124],[-86.39999999999988,30.40000000000012],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18048999999984,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.307140000000143],[-90.15463,29.11743],[-90.880225,29.148535000000123],[-91.62678499999987,29.67700000000013],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.480000000000132],[-95.60026,28.73863],[-96.59404,28.30748],[-97.13999999999982,27.83],[-97.37,27.38],[-97.37999999999987,26.69],[-97.33,26.21000000000012],[-97.13999999999982,25.87],[-97.52999999999989,25.84],[-98.24,26.060000000000116],[-99.01999999999988,26.37],[-99.3,26.84],[-99.51999999999987,27.54],[-100.11,28.110000000000127],[-100.45584,28.696120000000118],[-100.9576,29.380710000000132],[-101.6624,29.779300000000116],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45696999999984,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383000000012],[-106.1429,31.39995],[-106.50758999999982,31.75452],[-108.24,31.7548537181664],[-108.24194,31.34222],[-109.035,31.34194000000016],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72138999999986,32.72083],[-115.9913499999999,32.61239000000014],[-117.12775999999978,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.15686000000011],[-121.71456999999988,36.16153],[-122.54747,37.551760000000115],[-122.51201,37.78339000000013],[-122.95319,38.11371000000011],[-123.7272,38.95166000000012],[-123.86517,39.76699000000013],[-124.39807,40.3132],[-124.17886,41.142020000000116],[-124.2137,41.99964000000014],[-124.53284,42.7659900000001],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017000000011],[-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.000000000000114],[-120,49.000000000000114],[-117.03121,49.000000000000114],[-116.04818,49.000000000000114],[-113,49.000000000000114],[-110.04999999999983,49.000000000000114],[-107.05,49.000000000000114],[-104.04826,48.99986],[-100.65,49.000000000000114],[-97.22872000000471,49.00070000000011],[-95.15906950917196,49.000000000000114],[-95.15609,49.38425],[-94.81758,49.38905]]],[[[-153.0063140533369,57.11584219016589],[-154.0050902984581,56.73467682558106],[-154.5164027577701,56.9927489284467],[-154.67099280497115,57.46119578717249],[-153.76277950744148,57.81657461204377],[-153.2287294179211,57.968968410872435],[-152.56479061583514,57.901427313866975],[-152.1411472239063,57.59105866152199],[-153.0063140533369,57.11584219016589]]],[[[-165.57916419173358,59.90998688418755],[-166.19277014876727,59.754440822988975],[-166.848337368822,59.94140615502096],[-167.45527706609008,60.21306915957938],[-166.46779212142462,60.38416982689778],[-165.67442969466367,60.293606879306246],[-165.57916419173358,59.90998688418755]]],[[[-171.7316568675394,63.78251536727592],[-171.1144335602452,63.592191067144995],[-170.4911124339407,63.69497549097352],[-169.68250545965358,63.431115627691156],[-168.6894394603007,63.2975062120006],[-168.7719408844546,63.18859813094545],[-169.52943986720504,62.9769314642779],[-170.29055620021597,63.194437567794466],[-170.67138566799088,63.37582184513897],[-171.55306311753867,63.317789211675084],[-171.7911106028912,63.405845852300494],[-171.7316568675394,63.78251536727592]]],[[[-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.56211000000016],[-137.4525,58.905000000000115],[-136.4797200000001,59.46389],[-135.47583,59.78778],[-134.945,59.27056000000013],[-134.27111,58.86111],[-133.35554888220722,58.410285142645165],[-132.73042,57.69289000000011],[-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.49999542910379],[-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.95999990498108],[-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 }, { "country": "United Kingdom", "count": 17 }, { "country": "Ireland", "count": 16 }, { "country": "Malaysia", "count": 15 }, { "country": "China", "count": 13 }, { "country": "India", "count": 10 }, { "country": "Australia", "count": 9 }, { "country": "Portugal", "count": 6 }, { "country": "Singapore", "count": 6 }, { "country": "Thailand", "count": 5 }, { "country": "Denmark", "count": 4 }, { "country": "Israel", "count": 4 }, { "country": "Japan", "count": 4 }, { "country": "Romania", "count": 4 }, { "country": "South Africa", "count": 4 }, { "country": "Germany", "count": 3 }, { "country": "Pakistan", "count": 3 }, { "country": "Turkey", "count": 3 }, { "country": "Kuwait", "count": 2 }, { "country": "Lebanon", "count": 2 }, { "country": "Mexico", "count": 2 }, { "country": "Algeria", "count": 1 }, { "country": "Brazil", "count": 1 }, { "country": "Chile", "count": 1 }, { "country": "Costa Rica", "count": 1 }, { "country": "Czech Republic", "count": 1 }, { "country": "France", "count": 1 }, { "country": "Indonesia", "count": 1 }, { "country": "Norway", "count": 1 }, { "country": "Peru", "count": 1 }, { "country": "Poland", "count": 1 } ]; buildMap(mapData, data);

 <script src="https://d3js.org/d3.v6.js"></script> <p class="pl-2"> World Map </p> <div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>

I know the code doesn't run in this snippet

Update: Now runs with proper D3 Script Tag

I am new to posting questions to StackOverflow, especially when dealing with map data. In order for me to post this question, I could not include the mapData because Stack Overflow would send out a 418 error code (I'm a teapot). I assume this has to do with the size of the GeoJSON? (3852000 characters)

Hope someone can give me insight as there doesn't seem to be a lot of consistent documentation (please prove me wrong, I've been looking all week) towards D3 v6 in regards to drag/zoom functionality nor working examples of World Maps with the functionality I am looking for. I know of the migration guide ( https://observablehq.com/@d3/d3v6-migration-guide#event_drag ) and that helped some but I'm still not getting the result I need.

Thank you in advance!

UPDATE: Made a super simplified version of my GeoJSON so the mapData is in there now

Answer 1

Just use d3-zoom for both zooming and panning. Removing drag and zoom from the countries itself fixed it.

 function buildMap(mapData, data) { // Grab the container // Append an SVG with world-map as it's ID // Append ag for all of the countries const countriesData = data; const mapContainer = d3.select('#map-container'); const mapRatio = 0.4; // The plus turns it into a number const width = +mapContainer.node().clientWidth; const height = +mapContainer.node().clientHeight; // Map and projection const 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 Tooltip const Tooltip = 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 anyway Tooltip.style('visibility', 'hidden'); }); const zoom = d3.zoom() .on('zoom', (event) => { map.attr('transform', event.transform); }) .scaleExtent([1, 40]); // The Map const 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 country return pathBuilder(feature); }) .attr('fill', (feature) => { // Change color of the country based upon the count const country = countriesData.find(agg => agg.country === feature.properties.admin); if (country) { return colorScale(country.count); } else { return colorScale(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 Tooltip Tooltip.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 tooltip Tooltip.style('visibility', 'hidden'); }) .on('mousemove', (event, feature) => { // This adds the tooltip where the user's cursor currently is const country = countriesData.find(agg => agg.country === feature.properties.admin); if (country) { // We have an agg for this country, display name and their count Tooltip .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 count Tooltip .html(feature.properties.admin + '<br>' + 'Count: 0') .style('left', (event.x + 10) + 'px') .style('top', (event.y + 10) + 'px'); } }); } function colorScale(count) { // Take a count and return one of these: if (count > 20) { // Red return '#ff0000'; // Blue shift // return '#000052'; } else if (count > 15) { // Yellowish-red return '#ffaa00'; // Blue shift // return '#0000A3'; } else if (count > 5) { // Yellow return '#ffff00'; // Blue shift // return '#0000F5'; } else if (count >= 1) { // Greenish-yellow return '#aaff00'; // Blue shift // return '#4747FF'; } else { // Green return '#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);

 <script src="https://d3js.org/d3.v6.js"></script> <p class="pl-2"> World Map </p> <div id="map-container" class="col-3 m-2 p-0" style="border: 1px solid grey; background-color: #72727230; height: 300px;"></div>