在前面的博客中已經(jīng)介紹了如何繪制地區(qū)分布圖，這一節(jié)學(xué)習(xí)如何繪制交互式過(guò)濾地區(qū)分布圖。如果對(duì)繪制地區(qū)分布圖還不熟悉的話可以了解一下之前我寫(xiě)的博客：數(shù)據(jù)可視化【十三】地區(qū)分布圖

整體的框架仍然是在之前的基礎(chǔ)上進(jìn)行修改，主要是添加交互事件。

首先要做的是給圖例添加點(diǎn)擊事件，讓我們可以通過(guò)點(diǎn)擊改變地圖的狀態(tài)。
colorLegend.js

const groupEnter = groups.enter().append('g').attr('class', 'tick').attr('transform', (d,i) => `translate(0, ${i*spacing+circleRadius})`).merge(groups).attr('opacity', d => typeof(selected) === 'undefined' || d === selected ? 1 : 0.2).on('click',onClick)

然后通過(guò)onClick函數(shù)獲得點(diǎn)擊的狀態(tài)，進(jìn)行相應(yīng)的修改
index.js

const onClick = d => {console.log(d);selected = d === selected ? undefined : d;if (selected)bg.attr('opacity', 0.5)else bg.attr('opacity', 1)render(); }

上面的bg是背景的海洋，如果確定是點(diǎn)擊狀態(tài)的話就將其設(shè)置為透明的，并記錄當(dāng)前的狀態(tài)，然后進(jìn)行操作。這里把對(duì)地圖的操作都放到了render函數(shù)里面

把圖例的繪制和地圖的繪制分別放在對(duì)應(yīng)的函數(shù)里，我這里是按照視頻分別放在了choroplethMap函數(shù)和colorLegend函數(shù)，然后再進(jìn)行調(diào)用。

然后再根據(jù)不同的更新模式（update、enter）修改地圖的狀態(tài)（通過(guò)設(shè)置屬性就可以）

const projection = geoEqualEarth(); const pathGenerator = geoPath().projection(projection);export const choroplethMap = (selection, props) => {const {features,svg,colorScale,colorValue,selected} = props;console.log('choroplethMap.js');console.log(features); svg.call(zoom().on('zoom',() => {selection.attr('transform',event.transform);}));const pathUpdate = selection.selectAll('.country').data(features);const pathEnter = pathUpdate.enter().append('path').attr('class', 'country').attr('fill', d => colorScale(colorValue(d))).attr('d', pathGenerator).attr('stroke-width', 0.05)pathEnter.merge(pathUpdate).attr('opacity',d => !selected || colorValue(d) == selected ? 1: 0.1).attr('stroke-width', d => selected && colorValue(d) == selected ? 1: 0.05);pathEnter.append('title')//添加title，然后鼠標(biāo)放在上面就可以出現(xiàn)標(biāo)題.text(d => d.properties.name + ':' + colorValue(d)) }

上面的代碼和視頻中講解的出入比較多，我個(gè)人覺(jué)得curran講這個(gè)視頻的時(shí)候?qū)Ω履Ｊ降睦斫庥幸恍┢H，因此他視頻里面的邏輯稍微有點(diǎn)混亂，他的想法是每次點(diǎn)擊都重新進(jìn)行繪制，可是這完全是不必要的，我們需要對(duì)點(diǎn)擊后的操作在update.merge(enter)里面進(jìn)行就可以了，不用動(dòng)初始化的部分。

代碼地址：https://vizhub.com/Edward-Elric233/157b7264849e4dc19365b445d949b775?edit=files&file=choroplethMap.js

效果圖

這個(gè)是可以進(jìn)行交互的，我把代碼放在了自己的服務(wù)器上，如果有興趣可以訪問(wèn)：傳送門(mén)
需要注意的是盡量使用火狐或者谷歌瀏覽器訪問(wèn)，文件稍微有點(diǎn)大，加載可能需要一些時(shí)間。

總結(jié)

以上是生活随笔為你收集整理的数据可视化【十四】交互式过滤地区分布图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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