d3.js之中国地图

地图好像不全，数据我也不知道从哪抄的。到市。
数据在GitHub(这是个链接)上，我转化成了TopoJSON格式。

演示地址

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://d3js.org/d3.v5.js"></script><script src="https://unpkg.com/topojson@3"></script><title>Document</title><style>body {box-sizing: border-box;margin: 0;padding: 0;width: 100%;height: 100%;background-color: #666666;}.box {box-sizing: border-box;width: 1200px;height: 800px;background-color: #fff;padding: 30px;margin: 50px auto;}h1 {text-align: center;}.rectt {fill: #33adff;opacity: .9;}.rectt:hover {opacity: .2;}#sbx {position: relative;}.tooltip {position: absolute;text-align: center;width: 150px;height: 50px;padding: 2px;font: 12px;background: lightsteelblue;box-shadow: 1px 1px 10px;border-radius: 2px;pointer-events: none;}.tooltip {position: absolute;width: 120px;height: auto;text-align: center;font-family: simsun;font-size: 14px;color: white;background-color: black;border-width: 2px solid black;border-radius: 5px;opacity: 0;}.tooltip:after {content: '';position: absolute;bottom: 100%;left: 20%;margin-left: -8px;width: 0;height: 0;border-bottom: 12px solid #000000;border-right: 12px solid transparent;border-left: 12px solid transparent;}</style>
</head><body><div class="box"><h1>弦图</h1><div id="sbx"></div></div><script>let width = 900,height = 600;let ssbx = d3.select("#sbx")let ssvgdom = ssbx.append("svg").attr("width", width).attr("height", height)/***这部分我是想判断是哪个省，但我这两个数据不同，有好多对不上。别人的地图数据是好多GEOJSON格式的json，我不知道这么多的json怎么引入（一个一个来吗），所以我把他那个给转化成TopoJSON格式，只有一个文件。let jjso = localStorage.getItem("cityjson")let oobjcit = JSON.parse(jjso)let colorind = {}// console.log(oobjcit)oobjcit.children.forEach((a, b) => {// console.log(b)colorind[a.name] = b// let ss = ba.children.forEach((c) => {colorind[c.name] = btry {if (c.children.length > 1) {c.children.forEach((d) => {colorind[d.name] = b})}} catch (error) {// console.log(c)}// console.log(c)})// colorind[b] = a.children})// console.log(colorind)****/
//提示框let tooltip = ssbx.append("div").attr("class", "tooltip")//定义投影，好多专业术语，地图投影的类型let project = d3.geoMercator().center([100, 40]).scale(800).translate([width / 2, height / 2])
//路径生成器let pathh = d3.geoPath().projection(project)//两个颜色生成器，一个的话有的两个相邻省的颜色会相同。弄两个好像会区分开。let collor1 = d3.schemePaired let collor2 = d3.schemeSet3  // let color = d3.interpolateInferno;// console.log(color)d3.json("省.json").then(function (rooy) {// console.log(rooy)let oonj = {} ;//这个对象是将TopoJSON 转化为GEOJSON 需要的。let arcarr = [] ; let cooiind = {} ; //这个对象主要是判断属于同一个地区。key是下级地区的名称，value是上级的id，他这数据我只会这么用。oonj.type = "GeometryCollection";// oonj.geometries = []let objdd = rooy.objectsfor (let i in objdd) {objdd[i].geometries.forEach((a,b) => {// console.log(a)// console.log(i)cooiind[a.properties.name] = i  arcarr.push(a)});// console.log(objdd[i].geometries)// arcarr.push()}// console.log(cooiind)oonj.geometries = arcarr;//上面的数据处理打印下应该就能看明白。//将TopoJSON 转化为GEOJSON。topojson.feature(拓扑, 对象)，对象就是上面处理的。TopoJSON其实就是拓扑数据。let geopee = topojson.feature(rooy, oonj)// console.log(geopee)//下面就是绘制地图了let gg = ssvgdom.append("g")let ppath = gg.selectAll("path").data(geopee.features).enter().append("path");ppath.attr("class", "province").style("fill", (d, i) => {// console.log(colorind[d.properties.name])//cooiind[a.name]// let iing = colorind[d.properties.name]//填充颜色，看下是否为同一上级。刚刚想到了另一种绘制方法。不用处理这个数据。rooy.objects是数组，数组中的每个值都分一个组(我那颜色处理对象也是根据这处理的)。这样转化为GEOJSON的时候那个对象就不用处理，颜色也不用了。路径渲染的时候可以写个函数（甚至数据转化都可以写里面）。let iing = cooiind[d.properties.name]if (iing == undefined) {console.log(d.properties)}let innd = parseInt(iing)if(innd%2){return collor1[innd%12]}else{return collor2[innd%12]}// console.log(iing)// return color[parseInt(iing)% 12]// return color((parseInt(iing)-11)/ 90)}).attr("d", pathh).on("mouseover", function (d, i) {let domm = d3.select(this);domm.attr("opacity", 1).transition().duration(200).attr("opacity", .2)// console.log(d)// console.log(d3.mouse(this))// console.log(d3.event)//提示框内容，位置tooltip.html(`${d.properties.name}`).style("left", (d3.event.offsetX - 30) + "px").style("top", (d3.event.offsetY + 20) + "px").style("opacity", 1);// color(i) 为被选择图形的颜色// tooltip.style("box-shadow", "10px 0px 0px " + color(i));}).on("mouseout", function (d, i) {let domm = d3.select(this);domm.attr("opacity", .2).transition().duration(200).attr("opacity", 1)tooltip.style("opacity", 0);})})</script>
</body></html>

基本上就是数据处理那块复杂点，刚开始不知道那两种数据格式，也不知道怎么用。咱这简单用的话可以不用管他这格式，只要有数据就可以玩。还有他那地图投影，d3官网上有好多投影类型，有兴趣的话可以看官网，各种专业术语。咱这的话就平面投影，最简单的。d3还有经纬线绘制，我这没写，d3.geoGraticule 就是这个，网格生成器。

自己写的时候觉得好复杂，写完后就是也就是那，就是处理数据，处理完后就没什么了

d3.js之中国地图相关推荐

D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
china.js显示中国地图
** china.js显示中国地图 //运用vue写的 ```var app = new Vue({el: '#app',data: {points:[],//各个省份下的客户数量maxDate:'' ...
Three.js - 绘制中国地图
获取GeoJSON数据 GeoJSON是一种对各种地理数据结构进行编码的格式.本质就是一个JSON对象. {"type": "Feature","ge ...
使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
vue项目中使用echarts和china.js实现中国地图
在echarts最新的5.4.0版本中,已不能直接引用china.js来绘制中国地图,需要我们自己下载china.js包在网上查找资料,大部分是在index.html文件中直接引入echarts和c ...
echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
china.js实现中国地图
其实这个很简单,为什么要写这篇博客呢因为我发现我上次的china.js被下载了300多次.娃哈哈下载地址:https://download.csdn.net/download/sheng_xinj ...
D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
D3.js中国地图下钻 1
#使用d3.js实现中国地图及中国地图下钻到省市区在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...

d3.js之中国地图

d3.js之中国地图

d3.js之中国地图相关推荐

最新文章

热门文章