這種線條是怎麼畫出來的？

01-25

看到知乎有大神推薦這本書，看到封面我就已經驚呆了，很喜歡這種線條，但不知道怎麼畫的，問了身邊人有人說是Javascript，但是我查了一下，這個是編程方面的東西，以前好像沒有涉及過，（哦不除了grasshopper如果這個算的話），有沒有大神可以普及一下這個東東，這個JavaScript編程完要怎麼實現呢？例如用Rhino還是什麼其他的軟體?(小白提問還請見諒)

今晚試著臨摹了一下，感覺原圖應該還是用演算法生成的可能性更大，人手繪製耗時實在有點長。我猜想整個目錄的製作流程大概是這樣的——

將每個項目按照兩種分類方法（Categories 和 Platforms）整理成 Excel 表，然後作為表格導入 InDesign 中進行排版和樣式化。這步應該是在正文排版好後進行的，以便獲得每個項目的頁碼信息。
將文字部分排好後，用某種方法獲得兩側文字旁的一個點來作為曲線的端點——我懷疑乾脆就是將前面排好版後的圖導進 Rhino 里對著點的，因為原圖有些端點其實沒對齊。如果要自動化的方法——我想到一個：有可能是在 ID 里跑一個 JS 腳本，在文本框旁邊繪製一個路徑，然後再在 Grasshopper 里拾取這個路徑的特定節點來作為端點的定位點，但我覺得這個方法未免太複雜了，雖然很「自動化」，但好像不太有必要這麼做。

當然，如果這張圖根本就是手工繪製的，第一步結束後直接在 AI 里開始連線就是了。

在 GH 里對兩邊的對應端點進行連線。從之前提到的 @張可天的那個回答來看，GH 應該是能夠通過 Excel 的原數據來做到這件事的。而曲線是用什麼運算器生成的就不太清楚了，能確定的是並非我在（景觀設計里這種分析圖怎麼畫？ - Linkzero Tsang 的回答）這個回答中提到那種兩端點切線水平的三次貝塞爾曲線；因為有些曲線在 AI 中描時要好幾個節點才能擬合出來，我猜這些線在 Rhino 中的原始曲線應該是高階的。

* * * * * *

而 @毛偉偉提到的，線與線之間的「拉絲」，的確是這張圖的效果的最重要的地方。這些拉絲可以用 AI 中的混合 (Blend) 功能來生成。

混合功能出來的效果與曲線在 AI 中的圖層堆疊順序有關。我在臨摹的時候是使用這樣的邏輯來做的：將曲線左端從上至下以一個順序堆疊，然後同種顏色曲線整體使用混合，步長設為 10. 出來的效果與 GSD Platform 上的還是有所不同，而且一些地方比較亂。也有可能原圖是不同曲線分別進行混合，而非使用像我那樣整體混合的邏輯。

最後，還需要做的就是對「拉絲」加一個不透明度蒙板 (Opacity Mask) 以實現退暈，調整各圖層線寬、不透明度之類的細微調整了。

此為 AI 文件，以供參考：http://pan.baidu.com/s/1bjfLKi

* * * * * *

感謝邀請。

如果是要手動繪製，看這兒：景觀設計里這種分析圖怎麼畫？ - Linkzero Tsang 的回答

雖然僅僅是一個目錄的量，用手工繪製是可能的。不過以 GSD 的作風來看，應該還是用 Grasshopper 之類的軟體自動化繪製，然後再在 AI / PS 中附加樣式的。

這種情況下，可以參考這個回答：這樣類似電池圖的圖表是如何做的？ - 張可天的回答

謝邀，不是我的長項，沒啥理論基礎……只能靠自己YY著畫了。

DEMO和代碼在這裡：chords

效果：

粗線是隨機生成的(左邊-&>右邊)的pair，細線是插值出來的

如果把插值的密度改很大的話……

我擦得嘞，還挺酷……

大概思路：

對於每一對(a -&> b)算出兩個點坐標(ax, ay), (bx, by)，畫一條從(a -&> b)的三次貝塞爾曲線，這裡直接用的是context2d的bezierCurveTo方法，兩個控制點的選擇分別是(ax + 1/3 canvasWidth, ay), (bx - 1/3 canvasWidth, by)，沒啥講究，瞎選的。

為了畫出&拔絲&拉絲的效果，在相鄰兩個點(a1 -&> b*, a2 -&> b*)之間，線性插值若干個點對，如果想左邊看起來順滑（如DEMO）就以a側為基準插值，如果想右邊看起來比較順滑（如問題里的參考圖）就以b側位基準插值。

然後就是劃線了，正常的線畫粗一點、不透明度高一點，插值的線畫細一點、不透明度低一點，就出來圖上面的效果了。

著色用的是很簡單粗暴的辦法，根據左側的a值做hsb顏色當中的hue值，這是我自己的一個常用技巧，可以生成看起來非常連續順滑的色階。為了模擬問題的示例圖片里那種「分組」的效果，給設置了幾個桶，讓顏色不是連續的而是分組的。

隨著插值密度提高基本上性能線性下降，profile了一下主要花的時間都在stroke上面，不知道怎麼優化了。

so be it。

具體就看代碼吧，挺短的。我是用JavaScript畫的。P.S.知乎不支持inline的代碼塊真是不適合講代碼啊，召喚一個markdown編輯模式。

不請自來，畫這些線簡單，不管是手畫還是生成。我要說的是就算你畫完了也不會有這種效果。最終效果點睛之筆是配色和底圖那一層淡淡的連線和線與線之間的拉絲

D3.js，Gallery · mbostock/d3 Wiki · GitHub

看起來跟這個有點像 http://gojs.net/latest/samples/sankey.html

數據可視化可以用d3.js