当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 可视化工具D3.js教程 入门 （第十四章）—— 中国地图

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

2020年04月03日  | 移动技术网IT编程  | 我要评论

首先我们需要的是 中国地图的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>

 

效果：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网