上篇文章迄今复现过最复杂的可视化作品之「大西洋古抄本」(上)里讲到复杂交互一直是古柳的瓶颈。
链接：www.codex-atlanticus.it/#/

其实有想通过啃一些作品的源码来进行补强，比如：新加坡联合早报的作品「狂想鸡尾酒 配方关系知多少」，交互就蛮复杂，如果能搞清楚实现方式、将代码完全吃透，古柳觉得大概就真的算入门可视化实现了。

再比如，poppy field 这个用罂粟花作为视觉元素来可视化过去100多年里在200多场战争中失去生命的人数的作品。

一年前古柳就”一顿暴改“过其源码，“翻新”过原始老旧的实现方式，勉强跑成功可视化部分，并且在「年更博主冒个泡，或将开启可视化之旅 - 2020.08.27」一文里就有提到。
链接：https://weibo.com/3184350444/J4XyHajVq

只不过一直没进一步理解消化，所以像这些 button 按钮、slide 滑块等很基础的可视化组件如何组合到一起进行数据过滤并使得可视化部分产生变化，都没太多实践。一年过去了，依旧没啥进步，听起来就挺离谱，但却是事实(不愧是可视化混子)。

其实古柳也好奇大家都是怎么学的，感觉啃优秀作品的源码自然能学到很多，但每个作品代码风格、实现方式等都非常不同，而且可能杂糅很多可视化之外的内容，啃起来难度并不小。

当初古柳在 GitHub 创建 「dataviz in action」 这个针对优秀可视化作品进行翻新复现、代码实践的仓库，初心也是希望能把不同作品里不同的实现在消化吸收后用相对统一的方式进行复现，这样其他人再去上手学习或参考，难度就能降低很多，而且不至于看了 D3.js 相关的书本和视频，只会些简单图表，离实现优秀可视化作品还有很大的鸿沟，需要自己花很大力气去阅读和踩坑每个作品的源码。此时如果有人统一复现这些作品，并配套实现过程的讲解文章，大概就会很有帮助，不失为很有意义、很有价值的一件事。
链接：https://github.com/DesertsX/dataviz-in-action

然而理想很丰满，现实很骨感，古柳自己去啃优秀可视化作品的源码，也越来越有些力不从心，自己的水平并不高，想迈过那一个个的鸿沟同样很困难；而且有时候痴迷的作品只有静态图片和一些文字说明，压根没有源码，但实在很喜欢就硬着头皮去尝试复现，然后果然被打脸并极大地受挫，比如群友们可能知道的 Nadieh Bremer 的太空卫星相关可视化作品，之前尝试过后也是实现效果很差。
链接：https://twitter.com/nadiehbremer/status/1329094514586263552

用纯D3.js/原生JS等复现作品可能暂时都不会有多大提升，瓶颈无从突破，但另一方面，古柳心中似乎觉得还有一根救命稻草，那就是 Vue+D3.js 的组合拳，复杂的交互或许可以借助 Vue 框架来降低实现难度。

其实去年听 Shirley Wu 在 Data, Design, Code 这个分享里提到她用 D3+Vue+GreenSock 这三个工具来进行开发，以此充分利用每个工具的优点，这样就能用最少的代码、最快的速度实现出可视化作品。
链接：https://www.bilibili.com/video/BV1V7411S7k9
链接：https://shirleywu.studio/talks/data-design-code/#/title

虽然古柳一直在 D3.js 那打转，对 Vue 框架没那么熟，更做不到结合起来进行开发，但那次的分享却从此记在了心中，也有了个目标与方向，希望哪天也结合起来用好这三个工具进行复现或开发。

对 Vue 框架虽然不熟，但去年也学过些基础，7月底时照猫画虎拿来搭个工事中相关的简陋后台，但真到上 Vue CLI、用 Vue 全家桶进行开发时就止步了、也就没太多掌握。
链接：https://weibo.com/3184350444/JdkFjqkQl

直到大概4月中旬，古柳听了某个电台广播的内容(就不说是哪个了)，想到自己一直前端、后端啥都也不懂，菜得抠脚，于是垂死病中惊坐起，觉得真的要好好学扎实些 Vue 框架，这样真要开发些啥时也方便得多。

于是后面重新看起 Vue 基础，想着做些啥，也就有了五一前后用 Vue+VivaGraph.JS 做B站推荐视频网络图这事，虽然可视化部分和 Vue 结合的非常不好，但姑且先实现出来了，详情见：「爬取4百万数据只为画个B站推荐视频网络图（上）」
链接：B站相关推荐视频网络图可视化(demo尝鲜)

再后来终于开始看些 Vue+D3.js 的例子，从完全在 mounted 钩子函数里用纯 D3.js 的实现方式，到更多地利用 computed 计算属性和 methods 方法等，似乎一点点找到两者结合的感觉，逐渐熟悉了起来(虽然之后一段时间没看又忘光了)。

其中动态树图(注释插图也是特别漂亮。非常喜欢)和技能树这两个例子都挺小巧可爱的，还有其他例子或许可以一起整理出来写篇文章后续分享下。
链接：SVG 和 Vue.Js 构建动态树图
链接：Building a Dynamic Tree Diagram with SVG and Vue.Js
链接：Making a Skill-Tree With D3 and Vue

另外五月上旬就有一茬没一茬地看过 「大西洋古抄本/codex atlanticus」 的源码，也发现一些感觉挺奇怪的写法，并在群里问过群友。

不过那时还是完全啃不动那么完整且复杂的 Vue 实现的源码，于是先放下了。

后面继续补补基础，然后看了些免费的、付费的 Vue 全家桶开发移动端 App 等课程，对 Vuex 的用法、组件化开发的方式等都稍微熟悉后，才终于立起 flag 说想复现 「大西洋古抄本」 这个作品，啃啃源码看看都是如何实现的。其实一开始心里也没底，但公开定个小目标，而非不声不响地进行或许更有可能最终成功吧，于是也在群里/朋友圈等地方说了下。

中间虽然也曾因为从打包编译的文件里抽取原始数据时想当然尔的把一个对象数据弄成数组数据，而导致碰上奇怪的bug、折腾了很久。

但总体来说，算是相对顺利地将这个页面各部分组件都照着源码实现了遍，也大体搞懂了整个流程是怎么运作的，也第一次实现了较为复杂的交互效果，而且还是首次系统啃 Vue 相关的源码。

真的感觉学到了许多，似乎也突破了些复杂交互的瓶颈，明白了一些地方到底应该怎么实现。满是感慨也和群友老涂谈起“复杂项目拆分成各种小组件，啃起来方便的多，比以前那些d3的一坨的真的好下嘴的多“。

当然由于整个代码相对还是较为复杂的，写成一篇或几篇文章可能也仍无法真的讲清楚源码，毕竟古柳还从没写过讲解 Vue 实现的作品源码的文章，所以后续要如何尽可能进行分享，目前也还没想清楚，具体就看后续具体如何输出好了，敬请期待。