js绘制中国地图
来源:互联网 发布:故宫淘宝 月饼 编辑:程序博客网 时间:2024/06/10 17:27
简介
本文主要介绍如何利用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
查看原文:https://www.huuinn.com/archives/518
更多技术干货:风匀坊
关注公众号:风匀坊
阅读全文
0 0
- js绘制中国地图
- 利用d3.js绘制中国地图
- d3.js——绘制静态中国地图
- d3.js——绘制动态中国地图
- NCL绘制中国地图
- jquery绘制中国地图代码
- matlab绘制中国地图
- Basemap绘制中国地图
- SVG绘制中国地图
- d3 绘制中国地图
- Echarts绘制中国地图
- 中国地图SVG绘制
- 使用R语言绘制中国地图
- 中国地图FLASH和JS版本
- D3.js中国地图下钻
- 【zz】ncl绘制中国地图(shapefile添加)
- SVG 绘制可交互的中国地图
- d3 在中国地图上绘制城市
- 程序员:你为什么要离职?
- ALLPlayer(全能视频播放器)官方正式版V7.6下载 | allplayer官网下载
- 解决android studio中9-Patch问题
- svn使用
- Android Go 功能与新特性
- js绘制中国地图
- Kotlin之常用操作符
- JavaScript设计模式系列二:单例模式
- 一次低级技术失误引起的《清单革命》
- spring-boot框架开发的系统读取到的数据库数据相差8小时的问题解决
- 深度学习: GoogleNet 网络
- java之IDE工具elipse常见问题(待续)
- SurfaceView
- EA&UML日拱一卒-0基础学习微信小程序(2)- 关于小程序