D3 實現(xiàn)《天龍八部》人物關系可視化

? ? 點擊上方?月小水長?并?設為星標，第一時間接收干貨推送

一點碎碎念

《天龍八部》是金庸老先生的一部經(jīng)典古裝武俠愛情小說，1997 年由香港無線電視臺拍攝成同名影視劇，李添勝執(zhí)導，黃日華、陳浩民、樊少皇、李若彤、聯(lián)袂主演。該劇講述的是面對亂世，蕭(喬）峰、虛竹、段譽三人開始了非同尋常的江湖生涯，遇見了諸如天山童姥、慕容復、大輪明王、丁春秋、游坦之、四大惡人等各色高手，生死情仇、愛恨別離、民族大義在因緣際會中施展等故事。

義薄云天喬幫主

鐘靈毓秀

實現(xiàn)效果

po 個成品圖

如上圖所示，最上面的嵌入的網(wǎng)易云音樂標簽，播放的正是《天龍八部》主題曲《難念的經(jīng)》，下方就是可視化的具體區(qū)域。

1. 給主要人物都配了劇照，并在圓形圖片下標上了名字，其他的一些人物直接上純色，這個色彩搭配還行hhh，一來突出主次，二來圖片太多的話，網(wǎng)頁打開可能會很慢。

2. 當點擊某個人物的頭像的時候，會加粗所有與該人物有關的關系線，關系線上標注了人物之間的關系，最開始我是直接默認標注人物關系的，但是密密麻麻不太友好。

3. 最后一點，整個可視化關系圖是可以拖拽的，這是 D3 賦予的能力。具體可以參考下面這個視頻，由于有 BGM，加大音量食用風味更佳~

如何實現(xiàn)

那么這樣一個還算有點酷炫的作品，是如何實現(xiàn)的呢，俗話說，授人以魚不如授人以漁，列出所有需要用到的知識或技術點

1. html/css/js 基礎，這個基礎，意味著，不需要學完整個知識框架，只需要花十分鐘過一遍，用的時候知道在哪看就行。

2. d3js ，d3 是 一個前端可視化框架，相比較 echarts，它是一個比較底層的一個框架，更高層的 dash 就是基于 d3js 的，在這里主要用到 d3 經(jīng)典的 select-data-join（版本較老的 d3 叫 select-data-enter-append/update/remove) 編程范式思想、d3 的力導向圖以及鼠標事件這三大塊知識點。

that's all, Thanks for your attention!