Loading and parsing TOPOJSON

導(dǎo)入Topojson d3文件
地址：https://unpkg.com/topojson@3.0.2/dist/topojson.min.js
想要找d3文件的話去unpkg.com好像大部分都能找到的樣子

Rendering geographic features

尋找合適的地圖數(shù)據(jù)：谷歌搜索world-atlas npm，第一個網(wǎng)站點進去，然后選擇合適的d3文件。
這個文件里面的地圖是Topojson格式的，想要轉(zhuǎn)化為geojson需要使用topojson中的feature函數(shù)，傳入兩個參數(shù)，例如：

json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(data => { const countries = feature(data, data.objects.countries);console.log(countries); }

然后就可以使用數(shù)據(jù)，給每個數(shù)據(jù)添加path，然后通過設(shè)置屬性d進行繪制

Using different map projections

圖形的不同關(guān)鍵就在繪制d的函數(shù)的不同。
d3官網(wǎng)上有許多繪制不同形狀地圖的函數(shù)，可以根據(jù)需要選擇自己喜歡的。
網(wǎng)址：https://github.com/d3/d3-geo-projection
這里選擇的是geoEqualEarth，這個函數(shù)需要從d3文件中導(dǎo)入。于此同時還需要導(dǎo)入geoPath函數(shù)

const projection = geoEqualEarth(); const pathGenerator = geoPath().projection(projection);json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(data => { const countries = feature(data, data.objects.countries);console.log(countries); svg.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', pathGenerator);});

Rendering the projected sphere outline

然后就是通過設(shè)置CSS文件設(shè)置顏色，為了讓地圖的圓形凸顯出來，我們要先給邊框創(chuàng)建一個path

svg.append('path').attr('class', 'sphere').attr('d', pathGenerator({type:"Sphere"}));

然后在CSS文件中根據(jù)設(shè)置的類設(shè)置顏色：

.country{fill: #15ed76;stroke: black;stroke-opacity: 0.3; }.sphere{fill: #15beed; }

Tweaking map styles

最后的圖形效果如圖：
代碼地址：https://vizhub.com/Edward-Elric233/b21d1d4d6db34c9092c3252f39212bda

Highlighting on Hover using CSS

上面的效果已經(jīng)不錯了，但是如果我們想要鼠標(biāo)放在上面就自動變色的話，我們可以在CSS文件里面添加hover屬性，然后就可以了。

styles.css

.country:hover { /* 鼠標(biāo)放在上面可以變色 */fill : red; }

效果圖：

Adding simple tooltips(using )

我們還希望鼠標(biāo)停留在上面的畫可以提示國家的名稱，想要做到這點，我們可以給每個path添加title，然后設(shè)置文本為國家名稱即可。例如：
index.js

g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', pathGenerator).append('title')//添加title，然后鼠標(biāo)放在上面就可以出現(xiàn)標(biāo)題.text(d => d.properties.name);

我這里的數(shù)據(jù)直接就有國家名稱，視頻中的沒有還需要使用tsv文件查找。如果有需要的話可以看原視頻。

Loading multiple data files

Looking up country name from id

Panning & Zooming

當(dāng)然我們還希望能夠放大和縮小，這樣才能看到更多的細節(jié)。為了實現(xiàn)這個效果，我們要把所有的東西都放到g上，然后再讓svg.call(zoom().on('zoom', callback))添加鼠標(biāo)滑輪事件。具體到這里我們希望圖像的大小可以跟隨滑輪的滾動而變化：

const g = svg.append('g');svg.call(zoom().on('zoom',() => {g.attr('

效果圖：
這里的地圖應(yīng)該比上面的清晰許多，是因為這里使用的數(shù)據(jù)是以10m為單位的，所以分辨率高一點。如果需要的話只需要把最前面地圖的topojson的網(wǎng)址換成10m的即可：https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-10m.json

（比較大，加載稍微有點慢）

視頻中的內(nèi)容到這里就結(jié)束了，可是我總覺得這樣的顏色有些丑，我想起來在以前做柱狀圖的時候我嫌棄他的顏色太丑自己做了一個選擇顏色的函數(shù)，在這里也可以用一下：

let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx)=>{var i = idx || -1;return {get : () => {i=(i+1)%colorSet.length; return colorSet[i];}}; };const getColor = createGetColor();

createGetColor函數(shù)會返回一個對象，對象中g(shù)et屬性為函數(shù)，這個函數(shù)中使用了外層的變量i，因此i不會被釋放掉，相當(dāng)于靜態(tài)變量，每次調(diào)用這個函數(shù)這個變量都會加一，起到遍歷顏色數(shù)組的功能。

在有了這個獲取顏色函數(shù)以后我們只需要刪掉CSS文件中設(shè)置地圖顏色語句，然后在append后面設(shè)置屬性即可。

g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('fill', getColor.get).attr('d', pathGenerator).append('title')//添加title，然后鼠標(biāo)放在上面就可以出現(xiàn)標(biāo)題.text(d => d.properties.name);

效果圖：

顏色選擇的有點鮮艷，不過看起來還不錯，有點世界地圖的感覺。

代碼地址：https://vizhub.com/Edward-Elric233/2e91c94015e345afb0c9f3ae6cde412f

感覺這個球體部分地方有些變形，我們可以換一個地圖的形狀

例如換成geoMercator：

總結(jié)

以上是生活随笔為你收集整理的数据可视化【十】绘制地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。