|
首先我們需要的是 中國(guó)地圖的json數(shù)據(jù)：請(qǐng)戳這里 接下來(lái)咱們直接上代碼： 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中國(guó)地圖</title> <script src="./d3.min.js"></script> </head> <body> <svg width="900" height="700"></svg> </body> <script> //獲取svg var svg = d3.select('svg'); var width = svg.attr('width'); var height = svg.attr('height'); //創(chuàng)建區(qū)域分組 var g = svg.append('g').attr('transform','translate(0,0)'); //創(chuàng)建一個(gè)地圖投影 var mercator = d3.geoMercator() .center([107,31])//設(shè)置投影的中心點(diǎn) 經(jīng)緯度 .scale(550)//設(shè)置縮放因子 .translate([width/2,height/2]);//設(shè)置平移偏移量 //創(chuàng)建一個(gè)地理路徑生成器 var geoPath = d3.geoPath() .projection(mercator)//設(shè)置地理路徑生成器的投影方式 //獲取中國(guó)地圖的json文件 //利用node.js 在本地起一個(gè)http-server d3.json('map.json').then(function (data) {//D3 v5版本d3.json()現(xiàn)在將返回一個(gè)你可以在.then()方法中處理的Promise console.log(data);//features //新建一個(gè)顏色比例尺 var scaleColor = d3.scaleOrdinal() .domain(d3.range(data.features.length)) .range(d3.schemeCategory10); //繪制區(qū)域 g.append('g') .selectAll('path') .data(data.features) .enter() .append('path') .attr('stroke','gray') .attr('strok-widht',1) .attr('d',function (d,i) { return geoPath(d); }) .attr('fill',function (d,i) { return scaleColor(i); }) .on('mouseover',function (d,i) { d3.select(this).attr('fill','yellow'); }) .on('mouseout',function (d,i) { d3.select(this).attr('fill',scaleColor(i)); }); //繪制文字 g.append('g') .selectAll('text') .data(data.features) .enter() .append('text') .attr('font-size',12) .attr('text-anchor', 'middle') .attr('x',function (d,i) { var position = mercator(d.properties.centroid || [0,0]); return position[0]; }) .attr('y',function (d,i) { var position = mercator(d.properties.centroid || [0,0]); return position[1]; }) .attr('dy',function (d,i) { //這里為什么這么寫(xiě)呢，因?yàn)榘拈T(mén)和香港重合了，擠到一起了。 if (d.properties.name === '澳門(mén)特別行政區(qū)') { return 10; } }) .text(function (d,i) { return d.properties.name; }); }); </script> </html>
效果：
|
|
|
