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!
