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() .projection(projection); d3.json("./china.geojson", function (error, root) { if (error) return console.error(error); // console.log(root.features); svg.selectAll("path") .data(root.features) .enter() .append("path") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("fill", function (d, i) { return d3.color(i); }) .attr("d", path) //纹路生成 .on("mouseover", function (d, i) { d3.select(this) .attr("fill", "yellow"); }) .on("mouseout", function (d, i) { d3.select(this) .attr("fill", d3.color(i)); }); });

本文相关代码

https://github.com/cangyan/TAV/tree/master/00019_D3_CHINA_MAP

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注