js绘制中国地图

简介

本文主要介绍如何利用d3.js绘制中国地图

效果图



 

用到的数据

china.geojson

代码

引用相关依赖

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>


html部分

    <svg width="1920" height="1080" fill="none" stroke-linejoin="round" stroke-linecap="round"></svg>


程序主体部分


    var svg = d3.select("svg");

    var projection = d3.geoMercator()
        .center([107, 31])
        .scale(800)
        .translate([svg.style('width').replace("px", "") / 2, svg.style('height').replace("px", "") / 2]);

    var path = d3.geoPath()