可视化工具D3.js教程 入门 （第十四章）—— 中国地图

首先我们需要的是 中国地图的json数据：请戳这里

接下来咱们直接上代码：

代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国地图</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');

    //创建区域分组
    var g = svg.append('g').attr('transform','translate(0,0)');

    //创建一个地图投影
    var mercator = d3.geoMercator()
        .center([107,31])//设置投影的中心点 经纬度
        .scale(550)//设置缩放因子
        .translate([width/2,height/2]);//设置平移偏移量

    //创建一个地理路径生成器
    var geoPath = d3.geoPath()
        .projection(mercator)//设置地理路径生成器的投影方式

    //获取中国地图的json文件
    //利用node.js 在本地起一个http-server
    d3.json('map.json').then(function (data) {//D3 v5版本d3.json()现在将返回一个你可以在.then()方法中处理的Promise
        console.log(data);//features

        //新建一个颜色比例尺
        var scaleColor = d3.scaleOrdinal()
            .domain(d3.range(data.features.length))
            .range(d3.schemeCategory10);


        //绘制区域
        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) {
                //这里为什么这么写呢，因为澳门和香港重合了，挤到一起了。
                if (d.properties.name === '澳门特别行政区') {
                    return 10;
                }
            })
            .text(function (d,i) {
               return d.properties.name;
            });

    });

</script>
</html>

 

效果：

 

posted @ 2020-04-02 16:07  &执念  阅读(3769)  评论(10)  编辑  收藏  举报