D3 v4.x入门（1-终章）—— 地图探究

雨点打透心脏的1/2处 2021-09-16 03:08 287阅读 0赞

![70][]

### 为保长城不倒   烈马长枪握好   眼看时间不早   对的起江东父老   路上苦头不少   为求长生不老   你看我巍巍河山   中华屹立不倒！ ###

本系列第一阶段最后一章，给大家推荐一个D3领域的大佬

[https://my.csdn.net/lzhlzz][https_my.csdn.net_lzhlzz]

为了防止大家找不到地图json文件的资源，下面是地图资源的传送门

[https://blog.csdn.net/lzhlzz/article/details/41347929][https_blog.csdn.net_lzhlzz_article_details_41347929]

<template>
      <div id='svgContainer' style="">
        <div class="map">
          <h3>地图</h3>
          <div class="svg" id="geomap"></div>
        </div>
    </template>
    <script>
    import * as d3 from 'd3'
    export default {
      methods: {
        geomap () {
          const width = 1000
          const height = 1000
          const svg = d3.select('#geomap')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
          // 定义地图投影
          const projection = d3.geoMercator()
            .center([106, 35])
            .scale(880)
            .translate([width / 2, height / 2])
          // 定义地理路径生成器
          const path = d3.geoPath()
            .projection(projection)
          // 颜色比例尺
          const color = d3.scaleOrdinal(d3.schemeCategory20)
          // 读取地图文件 需要搭建本地服务器
          d3.json('/static/mapJson/china.json', function (error, root) {
            if (error) { return console.error(error) }
            // 绘制路径
            console.log(root.features)
            svg.selectAll('path')
              .data(root.features)
              .enter()
              .append('path')
              .attr('stroke', '#ccc')
              .attr('stroke-width', 1)
              .attr('fill', function (d, i) {
                return color(i)
              })
              .attr('d', path)
              .on('mouseover', function (d, i) {
                d3.select(this)
                  .attr('fill', 'yellow')
                // 是否选择鼠标移入显示省份，已注释
                // svg
                //   .append('text')
                //   .attr('x', () => projection(d.properties.cp)[0])
                //   .attr('y', () => projection(d.properties.cp)[1])
                //   .attr('dx', () => -d.properties.name.length / 2 + 'em')
                //   .attr('dy', '-0.5em')
                //   .style('font-size', '12px')
                //   .attr('class', 'label')
                //   .text(() => d.properties.name)
              })
              .on('mouseout', function (d, i) {
                d3.select(this)
                  .attr('fill', color(i))
                // d3.selectAll('.label').remove()
              })
            // 显示所有省份
            let textContainer = svg.selectAll('.texts')
              .data(root.features)
              .enter()
              .append('g')
              .attr('class', 'texts')
            textContainer.append('text')
              .attr('x', (d) => projection(d.properties.cp)[0])
              .attr('y', (d) => projection(d.properties.cp)[1])
              .attr('dx', (d) => -d.properties.name.length / 2 + 'em')
              .attr('dy', '0.5em')
              .style('font-size', '11px')
              .text((d) => d.properties.name)
          })
        }
      },
      mounted () {
        this.geomap()
      }
    }
    </script>
    <style lang="less">
    #svgContainer{
      width: 100%;
      height: 100%;
      .every{
        width: 400px;
        height: 425px;
        margin:15px;
        float: left;
        h3{
          margin:0;
          .button{
            float: right;
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
            padding: 2px 8px;
            border:1px solid #ccc;
            background: yellowgreen;
            border-radius: 4px;
            &:hover{
              background: violet;
            }
          }
        }
        .svg{
          width: 400px;
          height: 400px;
        }
        .map{
          width: 1000px;
          height: 1025px;
          margin:15px;
          float: left;
          h3{
            margin: 0;
          }
          .svg{
            width: 1000px;
            height:1000px;
          }
        }
      }
    }
    </style>

本系列的全家福，一家人最重要的就是整整齐齐

![70 1][]

这是本系列第一阶段的最后一章，以下是个人总结（找资源的小伙伴止步于此吧）

关于这个系列，应该会一直做下去，能做到什么程度，很美好的程度吧。

最近在看一本书，是阮大神的译著《黑客与画家》。翻开第一页，是麻省理工学院副教授的一段评语，放在很醒目的位置

##  “本书将迫使你重新思考计算机编程的本质 。” —— goushi ##

这句话后面跟的不是副教授的名字，也不是他的笔名，他的小名，他的化名，它只是狗屎的拼音。我没有认真（逐字逐句地）去读这本书，因为这本书确实没有达到让人认真去读的程度，他不是一本教程，也不是复杂编程的文档，它很像我大学的英语老师，上课的时候给我们讲哪个平台的纸尿布便宜，哪儿的特产好不好吃，八卦一下最近的‘鲜’闻，除了English，她什么都讲，我在想，这大概就是大学的英语课吧。此书也是如此，我记得这本书刚上来的时候就讲了美国的教育问题，然后是一些为人处事的技巧，还有一些创业的事，等等。当然，他也夹杂了‘黑客’的事情在里面，他解释了黑客这一群体的产生，习惯以及爱好，以及如何成为一个编程高手，事实上，如果你想成为一个好厨子，也可以看看这本书。因为成为一个优秀的人的方式其实都差不多。

所以这也就很好的解释了我为什么要在本章的开头放那段话。

？？？

如果你认真看了上面的佐证，你会发现我举的例子跟我佐证的东西好像并没有什么联系，或者说，还没找到其中的联系。

如果你那么认为，其实你已经找到了这个问题的答案。

并不是所有表面上没有联系的东西不能放在一起，没人规定必须要物以类聚，人以群分，这只是人‘良好’的习惯在作祟。人们总是愿意把表面上相似的放在一起，人本身就像是一块磁铁，收集一些和自己相似的东西，把这些东西吸在身上。你可以经常看到自诩为程序猿的单身汪在看《XXX编程从入门到放弃》，他似乎从来没有关注到自己单身汪的身份，因为这和他本身的认知不同，相比于在厕所里拿一本《泡妞入门》打发时间，他更愿意思考一下怎么应付晚上要开的产品评审会。

其实无意冒犯这种生活方式，星爷的电影里有一个片段，一个赌徒同时跟四桌人打四个牌局，在不同的牌局里轻描淡写的赢钱。你我皆凡人，很难站在天才的角度跟别人探讨时间简史的同时还能敲着一手优美的代码。但好在你的时间没有天才的时间宝贵，你有很多除了编程之外的时间，不会因为你是个天才而被抓到某某科研所夜以继日的工作。

有空的话，我想找本《吃饭入门》看看，看一下吃饭到底有什么门道~

[70]: /images/20210813/4e661ceb9d09405697558bcb24411d76.png
[https_my.csdn.net_lzhlzz]: https://my.csdn.net/lzhlzz
[https_blog.csdn.net_lzhlzz_article_details_41347929]: https://blog.csdn.net/lzhlzz/article/details/41347929
[70 1]: /images/20210813/3b45bf47fdac4f2a8705d5bceb57b2f3.png