一点碎碎念《天龙八部》|义薄帮主乔钟灵毓秀
点击上方月小水长并设为星星即可第一时间收到有用信息推送
这是月小水长的第62篇原创文章
一点想法
《天龙八部》是金庸先生的经典古装武侠言情小说。 1997年由香港TVB拍成同名影视剧,由李天生执导,黄日华、陈浩民、范少璜、李若彤联合主演。 该剧讲述了萧峰、虚竹、段誉面对乱世,开启不平凡的江湖生涯的故事。 他们结识了天山通老、慕容复、大伦明王、丁春秋、游坦等人。 其中,四大反派等各色高手,生与死、爱与恨、爱与恨的分离,通过命运与命运的体现民族正义的故事。
一波云天桥帮主
钟令玉秀
我很小的时候就看过《天龙八部》。 我一定已经记住了。 不过当时我还小,印象深刻的只是打斗场面。 我对人物之间复杂的关系一无所知。 我当时在上大学。 出于强烈的好奇心,N再次观看了节目,并逐渐了解了它。 最近闲暇时在研究d3/neo4/p5可视化(其实超级忙熬夜学习),就萌生了可视化《天龙八部》的想法。 当我写完代码的时候已经是凌晨1点多了。 未来有计划将TVB剧集可视化。
达到效果
po成品图
如上图所示,顶部嵌入网易云音乐标签播放《天龙八部》主题曲《难念经》,具体可视化区域如下。
主要人物均给出剧照,圆形图片下方标注了他们的名字。 其他一些字符直接用纯色着色。 这个颜色搭配还可以啊哈哈哈一是突出重点。 其次,如果图片太多,可能会导致页面打不开。 会很慢。
当你点击某个角色的头像时,所有与该角色相关的关系线都会加粗。 关系线标记了人物之间的关系。 一开始我直接默认标注了人物关系,但是因为线条密集,不太友好。
最后但并非最不重要的一点是,整个视觉关系图可以拖放,这是D3赋予的能力。 详细信息,您可以参考下面的视频。 由于有BGM,可以调大音量享受更好的味道~
如何实现
那么这么酷的作品是如何实现的呢? 俗话说,授人以鱼不如授人以渔。 列出所有需要用到的知识点或技术点。
html/css/js的基础,这个基础意味着你不需要学习整个知识框架,只需要花十分钟就可以过一遍天龙八部关系任务有什么用,只需要知道使用的时候看哪里即可。
d3js,d3是一个前端可视化框架。 相比之下,它是一个比较底层的框架。 更高级别的 dash 基于 d3js。 这里主要用到了经典的d3-data-join(老版本的d3叫-data-enter-//)编程范式思想,d3的力导向图和鼠标事件是三大知识点。
仅此而已,为了你!
九软件 版权声明:以上发布的内容及图片均来源于网络,如有无意侵犯到您的权利,请联系我们及时删除!