像http://datamaps.github.io/这样的angular 2数据映射

npm install -g @angular/cli
npm install d3 --save

ng new data-mapping-app
cd data-mapping-app

"scripts": [
  "node_modules/d3/dist/d3.min.js"
]

ng generate component data-map

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-data-map',
  templateUrl: './data-map.component.html',
  styleUrls: ['./data-map.component.css']
})
export class DataMapComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
    this.createMap();
  }

  createMap(): void {
    const width = 800;
    const height = 600;
    const svg = d3.select('#map')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    // 示例数据
    const data = [
      { country: 'USA', value: 100 },
      { country: 'Canada', value: 50 },
      { country: 'Mexico', value: 75 }
    ];

    // 创建地图投影和路径生成器
    const projection = d3.geoMercator()
      .scale(150)
      .translate([width / 2, height / 2]);

    const path = d3.geoPath().projection(projection);

    // 假设我们有一些地理数据
    const countries = [
      { name: 'USA', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]] } },
      { name: 'Canada', geometry: { type: 'Polygon', coordinates: [[[1, 0], [2, 0], [2, 1], [1, 1], [1, 0]]] } },
      { name: 'Mexico', geometry: { type: 'Polygon', coordinates: [[[0, 1], [1, 1], [1, 2], [0, 2], [0, 1]]] } }
    ];

    // 绘制地图
    svg.selectAll('.country')
      .data(countries)
      .enter()
      .append('path')
      .attr('class', 'country')
      .attr('d', path)
      .style('fill', (d, i) => d3.schemeCategory10[i]);

    // 添加数据标签
    svg.selectAll('.label')
      .data(data)
      .enter()
      .append('text')
      .attr('class', 'label')
      .attr('x', (d) => projection([0, 0])[0] + 10)
      .attr('y', (d) => projection([0, 0])[1] + 10)
      .text((d) => `${d.country}: ${d.value}`);
  }
}

<div id="map"></div>

ng serve