D3 V6 - 缩放和拖动功能

Question

在 Angular 7 中使用 D3 v6 创建世界地图 Choropleth。（从 Angular 精简为纯 JavaScript）

从 NaturalEarth 收集并在 mapshaper 中编译的形状文件以创建 GeoJSON。

保持简单，只是国家，但我得到了橡皮筋效果。 当我尝试拖动地图（无论是背景还是特定国家/地区）时，它会尝试移动您拖动的位置，然后弹回其原始位置，除非您在屏幕上拖动光标或在事件被触发。

同样，当您放大特定国家/地区然后放大/拖动其他国家/地区时，它会在创建地图时将您弹回原始缩放比例。

 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>

我知道代码不在此代码段中运行

更新：现在使用适当的 D3 脚本标签运行

我是向 StackOverflow 发布问题的新手，尤其是在处理地图数据时。 为了让我发布这个问题，我不能包含 mapData，因为 Stack Overflow 会发出 418 错误代码（我是茶壶）。 我认为这与 GeoJSON 的大小有关吗？ （3852000 个字符）

希望有人能给我一些见解，因为似乎没有很多一致的文档（请证明我错了，我整周都在看）关于D3 v6 的拖动/缩放功能或世界地图的工作示例我正在寻找的功能。 我知道迁移指南（ https://observablehq.com/@d3/d3v6-migration-guide#event_drag ），这对一些人有所帮助，但我仍然没有得到我需要的结果。

先感谢您！

更新：制作了我的 GeoJSON 的超级简化版本，因此 mapData 现在在那里

Answer 1

只需使用d3-zoom进行缩放和平移。 从国家本身删除拖动和缩放修复了它。

 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>