D3 实现《天龙八部》人物关系可视化

一点碎碎念

《天龙八部》是金庸老先生的一部经典古装武侠爱情小说，1997 年由香港无线电视台拍摄成同名影视剧，李添胜执导，黄日华、陈浩民、樊少皇、李若彤、联袂主演。该剧讲述的是面对乱世，萧(乔）峰、虚竹、段誉三人开始了非同寻常的江湖生涯，遇见了诸如天山童姥、慕容复、大轮明王、丁春秋、游坦之、四大恶人等各色高手，生死情仇、爱恨别离、民族大义在因缘际会中施展等故事。

义薄云天乔帮主

钟灵毓秀

某很小很小，应该有记忆起，就看了《天龙八部》，不过当时年幼，只看得打打杀杀的武斗场景拍案叫绝，对其中纷繁复杂的人物关系一窍不通，上大学时再一次由于强烈的好奇心，N 刷了这部剧，才算逐渐理解。最近业余时间在学习 d3/neo4/p5 可视化（其实超级忙，熬夜在学）， 就有了可视化 《天龙八部》的想法，完成代码的时候已经是凌晨 1 点多了。后续会有 TVB 系列电视剧可视化的计划。

实现效果

po 个成品图

如上图所示，最上面的嵌入的网易云音乐标签，播放的正是《天龙八部》主题曲《难念的经》，下方就是可视化的具体区域。

1. 给主要人物都配了剧照，并在圆形图片下标上了名字，其他的一些人物直接上纯色，这个色彩搭配还行hhh，一来突出主次，二来图片太多的话，网页打开可能会很慢。
2. 当点击某个人物的头像的时候，会加粗所有与该人物有关的关系线，关系线上标注了人物之间的关系，最开始我是直接默认标注人物关系的，但是密密麻麻不太友好。
3. 最后一点，整个可视化关系图是可以拖拽的，这是 D3 赋予的能力。具体可以参考下面这个视频，由于有 BGM，加大音量食用风味更佳~

如何实现

那么这样一个还算有点酷炫的作品，是如何实现的呢，俗话说，授人以鱼不如授人以渔，列出所有需要用到的知识或技术点

1. html/css/js 基础，这个基础，意味着，不需要学完整个知识框架，只需要花十分钟过一遍，用的时候知道在哪看就行。
2. d3js ，d3 是 一个前端可视化框架，相比较 echarts，它是一个比较底层的一个框架，更高层的 dash 就是基于 d3js 的，在这里主要用到 d3 经典的 select-data-join（版本较老的 d3 叫 select-data-enter-append/update/remove) 编程范式思想、d3 的力导向图以及鼠标事件这三大块知识点。

that's all, Thanks for your attention!