上篇文章迄今復現過最複雜的可視化作品之「大西洋古抄本」(上)裏講到複雜交互一直是古柳的瓶頸。
鏈接：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 實現的作品源碼的文章，所以後續要如何儘可能進行分享，目前也還沒想清楚，具體就看後續具體如何輸出好了，敬請期待。
