D3 實(shí)現(xiàn)《天龍八部》人物關(guān)系可視化
? ? 點(diǎn)擊上方?月小水長?并?設(shè)為星標(biāo)，第一時(shí)間接收干貨推送
一點(diǎn)碎碎念
《天龍八部》是金庸老先生的一部經(jīng)典古裝武俠愛情小說，1997 年由香港無線電視臺(tái)拍攝成同名影視劇，李添勝執(zhí)導(dǎo)，黃日華、陳浩民、樊少皇、李若彤、聯(lián)袂主演。該劇講述的是面對(duì)亂世，蕭(喬）峰、虛竹、段譽(yù)三人開始了非同尋常的江湖生涯，遇見了諸如天山童姥、慕容復(fù)、大輪明王、丁春秋、游坦之、四大惡人等各色高手，生死情仇、愛恨別離、民族大義在因緣際會(huì)中施展等故事。
義薄云天喬幫主
鐘靈毓秀
實(shí)現(xiàn)效果
po 個(gè)成品圖
如上圖所示，最上面的嵌入的網(wǎng)易云音樂標(biāo)簽，播放的正是《天龍八部》主題曲《難念的經(jīng)》，下方就是可視化的具體區(qū)域。
給主要人物都配了劇照，并在圓形圖片下標(biāo)上了名字，其他的一些人物直接上純色，這個(gè)色彩搭配還行hhh，一來突出主次，二來圖片太多的話，網(wǎng)頁打開可能會(huì)很慢。
當(dāng)點(diǎn)擊某個(gè)人物的頭像的時(shí)候，會(huì)加粗所有與該人物有關(guān)的關(guān)系線，關(guān)系線上標(biāo)注了人物之間的關(guān)系，最開始我是直接默認(rèn)標(biāo)注人物關(guān)系的，但是密密麻麻不太友好。
最后一點(diǎn)，整個(gè)可視化關(guān)系圖是可以拖拽的，這是 D3 賦予的能力。具體可以參考下面這個(gè)視頻，由于有 BGM，加大音量食用風(fēng)味更佳~
如何實(shí)現(xiàn)
那么這樣一個(gè)還算有點(diǎn)酷炫的作品，是如何實(shí)現(xiàn)的呢，俗話說，授人以魚不如授人以漁，列出所有需要用到的知識(shí)或技術(shù)點(diǎn)
html/css/js 基礎(chǔ)，這個(gè)基礎(chǔ)，意味著，不需要學(xué)完整個(gè)知識(shí)框架，只需要花十分鐘過一遍，用的時(shí)候知道在哪看就行。
d3js ，d3 是 一個(gè)前端可視化框架，相比較 echarts，它是一個(gè)比較底層的一個(gè)框架，更高層的 dash 就是基于 d3js 的，在這里主要用到 d3 經(jīng)典的 select-data-join（版本較老的 d3 叫 select-data-enter-append/update/remove) 編程范式思想、d3 的力導(dǎo)向圖以及鼠標(biāo)事件這三大塊知識(shí)點(diǎn)。
that's all, Thanks for your attention!