使用D3渲染中国地图

//1、先在页面中初始化一个svg标签var w = 1000,h = 1000;var svg = d3.select('body').append('svg').attr('width',w).attr('height',h).attr('transform','translate(0,0)');//d3.geo  是d3中一些地图相关的方法var projection =d3.geo.mercator()//投影的方法.center([107,31])//经纬度.scale(550)//放大的倍数.translate([w/2,h/2]);//投影在某个位置//坐标的转换 把相应经纬度的点 转换成 svg里面d属性相应的要去画的  坐标点var path = d3.geo.path().projection(projection);//d3中做服务器请求的  方法来的    d3.json('./data/china_diaoyudao.json',function (err,root) {//root  是用d3请求回来的数据console.log(root.features);//数组  34个d3.select('svg').selectAll('path').data(root.features).enter().append('path').attr('stroke','gray').attr('stroke-width','1').attr('d',function (data,index) {return path(data);}).attr('fill',function (data,index) {return color();}).on('mouseover',function () {//this dom对象d3.select(this).attr('fill','yellow')}).on('mouseout',function () {d3.select(this).attr('fill',color())})})//返回一个随机16进制的 颜色function color(){return '#'+Math.floor(Math.random()*0xffffff).toString(16);}

使用D3渲染中国地图相关推荐

D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
D3.js中国地图下钻 1
#使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
THREE + d3制作中国地图挤压(extrude)模型
下午花了几个小时边学边做,做出来了一个中国地图的挤压模型.其中中国地图的数据是geojson的格式,由于相关法律这里无法提供地图数据.如果想要学习交流使用可以前往github上翻一翻. 使用的工具很单 ...
echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...
ECHARTS-MAP的使用: 中国地图及省份边界的查看
地图引入方式及demo详解: 官方说明:http://ecomfe.github.io/echarts-map-tool/ ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标 ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
可视化工具D3.js教程入门（第十四章）—— 中国地图
可视化工具D3.js教程入门 (第十四章)-- 中国地图代码 <!DOCTYPE html> <html lang="en"><head>& ...
echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...

使用D3渲染中国地图

使用D3渲染中国地图相关推荐

最新文章

热门文章