d3.js v4 geojson 生成 svg地图

准备

d3 文档 以及 js文件

效果

开始

地图需要的参数 展示的宽 高 geojson文件数据
json数据可以通过阿里地图数据下载

const width = 1920;
const height = 1080;
const geoJson = {};
const dom = d3.select('#app');
// 投影模式 以及投影的宽高 数据 偏移
const projection = d3.geoEquirectangular()
    .fitExtent([
        [0, 0],
        [width, height]
    ], geoJson)
    .translate([width / 2, height / 2]);
// geo path
const path = d3.geoPath().projection(projection);
const features = geoJson.features;
// 颜色
const color = d3.scaleLinear()
    .domain([0, features.length])
    .range(["brown", "steelblue"]);
const svg = dom.append('svg').attr('width', width).attr('height', height);
const main = svg.append('g');
// 生成path
main.selectAll('path')
    .data(features)
    .enter()
    .append('path')
    .attr('d', path)
    .attr('fill', (d, i) => {
        return color(i);
    })
    .attr('stroke', 'rgba(255, 255, 255, 1')
    .attr('stroke-width', 1)
    .on('click', (d, i) => {
        // 绑定点击事件
        console.log(d)
    })