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，第一個(gè)網(wǎng)站點(diǎn)進(jìn)去，然后選擇合適的d3文件。
這個(gè)文件里面的地圖是Topojson格式的，想要轉(zhuǎn)化為geojson需要使用topojson中的feature函數(shù)，傳入兩個(gè)參數(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ù)，給每個(gè)數(shù)據(jù)添加path，然后通過設(shè)置屬性d進(jìn)行繪制

Using different map projections

圖形的不同關(guān)鍵就在繪制d的函數(shù)的不同。
d3官網(wǎng)上有許多繪制不同形狀地圖的函數(shù)，可以根據(jù)需要選擇自己喜歡的。
網(wǎng)址：https://github.com/d3/d3-geo-projection
這里選擇的是geoEqualEarth，這個(gè)函數(shù)需要從d3文件中導(dǎo)入。于此同時(shí)還需要導(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è)置顏色，為了讓地圖的圓形凸顯出來(lái)，我們要先給邊框創(chuàng)建一個(gè)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)不錯(cuò)了，但是如果我們想要鼠標(biāo)放在上面就自動(dòng)變色的話，我們可以在CSS文件里面添加hover屬性，然后就可以了。

styles.css

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

效果圖：

Adding simple tooltips(using )

我們還希望鼠標(biāo)停留在上面的畫可以提示國(guó)家的名稱，想要做到這點(diǎn)，我們可以給每個(gè)path添加title，然后設(shè)置文本為國(guó)家名稱即可。例如：
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ù)直接就有國(guó)家名稱，視頻中的沒有還需要使用tsv文件查找。如果有需要的話可以看原視頻。

Loading multiple data files

Looking up country name from id

Panning & Zooming

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

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

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

（比較大，加載稍微有點(diǎn)慢）

視頻中的內(nèi)容到這里就結(jié)束了，可是我總覺得這樣的顏色有些丑，我想起來(lái)在以前做柱狀圖的時(shí)候我嫌棄他的顏色太丑自己做了一個(gè)選擇顏色的函數(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ù)會(huì)返回一個(gè)對(duì)象，對(duì)象中g(shù)et屬性為函數(shù)，這個(gè)函數(shù)中使用了外層的變量i，因此i不會(huì)被釋放掉，相當(dāng)于靜態(tài)變量，每次調(diào)用這個(gè)函數(shù)這個(gè)變量都會(huì)加一，起到遍歷顏色數(shù)組的功能。

在有了這個(gè)獲取顏色函數(shù)以后我們只需要?jiǎng)h掉CSS文件中設(shè)置地圖顏色語(yǔ)句，然后在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);

效果圖：

顏色選擇的有點(diǎn)鮮艷，不過看起來(lái)還不錯(cuò)，有點(diǎn)世界地圖的感覺。

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

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

例如換成geoMercator：

總結(jié)

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

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