| 数据可视化 | 您所在的位置：网站首页 › 创意画中国地图 › 数据可视化 |
数据可视化
|
用的json文件来源于阿里，实现了简单的交互，即鼠标放在省份上，可以显示该省的现有确诊量。注意领土完整性 DataV.GeoAtlas地理小工具系列 v7版本用的是geoMercator()和geoPath；v3版本用的是geo.mercator()和geo.path()。总归还是版本的坑很容易踩 center决定了地图投影的位置，scale决定了地图投影的大小。 projection() 是设定生成器的投影函数，把上面定义的投影传入即可。以后，当使用此生成器计算路径时，会自己加入投影的影响。 //定义地图的投影 var projection = d3.geoMercator() .center([100, 38]) .scale(920) .translate([width/2, height/2]); //定义地形路径生成器 var geoPath = d3.geoPath() .projection(projection); //设定投影因为地图里的省份容易互相重叠（比如香港、广东和澳门），所以在texts里用transform进行了细微的人工调整。 var texts = svg.selectAll(".texts") .data(data.features) .enter() .append("text") .attr("class", "texts") .text((d,i)=>d.properties.name) .attr("text-anchor","middle") .attr("transform", function(d) { var centroid = geoPath.centroid(d), x = centroid[0], y = centroid[1]; if((d.properties.name=="澳门")||(d.properties.name=="安徽省") ||(d.properties.name=="河北省")) y=y+15; if((d.properties.name=="香港")) y=y+10; //return "translate(" + x + ", " + y + ")"; return `translate(${x},${y})`; }) .attr('fill','999') .attr("font-size","8px"); });南海部分是直接通过通过img src放到html网页上的。本来想尝试fill到svg的rect里，后来发现不是很方便（意思是我不会） 
tooltip的话之前的博客里也写过，v7是event.pageX，v3是d3.event.pageX tooltip.html("现有确诊量："+t) .style("visibility","visible") .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY -10) + "px")全部代码： 中国数据地图 .tooltip { position: absolute; pointer-events: none; font-size: 8px; opacity: 1; } .southchinasea { stroke: black; stroke-width: 1px; fill: red; } img{ border: 0.3px solid black; } var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.8; var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.98; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var covid=[591,113,2,0,1,5,238,0,2330,7,392,0,102,2,8,150,0,7,103,15,0,5,212,1,12,0,2,0,16,0,0,260761,0,0,1371462] var linear = d3.scaleLinear() .domain([990,90000]) .range([0,255]); var color=['#fff7ec','#fee8c8','#fdd49e','#fdbb84', '#fc8d59','#ef6548','#d7301f','#b30000','rgb(153, 0, 0)']; //定义地图的投影 var projection = d3.geoMercator() .center([100, 38]) .scale(920) .translate([width/2, height/2]); //定义地形路径生成器 var geoPath = d3.geoPath() .projection(projection); //设定投影 console.log(geoPath); //颜色比例尺 //请求ChinaGeo.json d3.json("China.json").then(function(data){ //100000_full.json A2_100000_full.json console.log(data); var scaleColor = d3.scaleOrdinal() .domain(d3.range(data.features.length)) .range(d3.schemeCategory10); var groups = svg.append("g"); var tooltip=d3.select("body") .append("div") .attr("class","tooltip") .style("background-color","#d3d3d3") .style("border-radius", "3px") .style("padding","5px"); groups.selectAll("path") .data(data.features) .enter() .append("path") .attr("class","province") .attr("stroke","#333") .attr("stroke-width","0.2px") .attr("info",(d,i)=>covid[i]) .attr("fill",function(d,i){ if(covid[i] |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |