在 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 a g 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 …