為保長城不倒
烈馬長槍握好
眼看時間不早
對的起江東父老
路上苦頭不少
為求長生不老
你看我巍巍河山
中華屹立不倒！

本系列第一階段最後一章，給大家推薦一個D3領域的大佬

為了防止大家找不到地圖json檔案的資源，下面是地圖資源的傳送門

<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>
 

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

這是本系列第一階段的最後一章，以下是個人總結（找資源的小夥伴止步於此吧）

 關於這個系列，應該會一直做下去，能做到什麼程度，很美好的程度吧。

 最近在看一本書，是阮大神的譯著《黑客與畫家》。翻開第一頁，是麻省理工學院副教授的一段評語，放在很醒目的位置

 “本書將迫使你重新思考計算機程式設計的本質 。” —— goushi

  這句話後面跟的不是副教授的名字，也不是他的筆名，他的小名，他的化名，它只是狗屎的拼音。我沒有認真（逐字逐句地）去讀這本書，因為這本書確實沒有達到讓人認真去讀的程度，他不是一本教程，也不是複雜程式設計的文件，它很像我大學的英語老師，上課的時候給我們講哪個平臺的紙尿布便宜，哪兒的特產好不好吃，八卦一下最近的‘鮮’聞，除了English，她什麼都講，我在想，這大概就是大學的英語課吧。此書也是如此，我記得這本書剛上來的時候就講了美國的教育問題，然後是一些為人處事的技巧，還有一些創業的事，等等。當然，他也夾雜了‘黑客’的事情在裡面，他解釋了黑客這一群體的產生，習慣以及愛好，以及如何成為一個程式設計高手，事實上，如果你想成為一個好廚子，也可以看看這本書。因為成為一個優秀的人的方式其實都差不多。

 所以這也就很好的解釋了我為什麼要在本章的開頭放那段話。

？？？

如果你認真看了上面的佐證，你會發現我舉的例子跟我佐證的東西好像並沒有什麼聯絡，或者說，還沒找到其中的聯絡。

如果你那麼認為，其實你已經找到了這個問題的答案。

  並不是所有表面上沒有聯絡的東西不能放在一起，沒人規定必須要物以類聚，人以群分，這只是人‘良好’的習慣在作祟。人們總是願意把表面上相似的放在一起，人本身就像是一塊磁鐵，收集一些和自己相似的東西，把這些東西吸在身上。你可以經常看到自詡為程式猿的單身汪在看《XXX程式設計從入門到放棄》，他似乎從來沒有關注到自己單身汪的身份，因為這和他本身的認知不同，相比於在廁所裡拿一本《泡妞入門》打發時間，他更願意思考一下怎麼應付晚上要開的產品評審會。

  其實無意冒犯這種生活方式，星爺的電影裡有一個片段，一個賭徒同時跟四桌人打四個牌局，在不同的牌局裡輕描淡寫的贏錢。你我皆凡人，很難站在天才的角度跟別人探討時間簡史的同時還能敲著一手優美的程式碼。但好在你的時間沒有天才的時間寶貴，你有很多除了程式設計之外的時間，不會因為你是個天才而被抓到某某科研所夜以繼日的工作。

  有空的話，我想找本《吃飯入門》看看，看一下吃飯到底有什麼門道~