山西
前端用JavaScript實現桑基圖（Sankey圖）
桑基圖（Sankey圖），是流圖的一種，常用來展示事物的數量、發展方向、數據量大小等，在可視化分析中經常使用。
本文，演示如何在前端用JavaScript繪制桑基圖。注：本例使用JShaman數據展示JS代碼混淆加密流程。
先看效果：
因為已有成熟的庫可用，比如，可以使用d3引擎，所以sankey的實現較為簡單。
眾所周知，JShaman是國內知名的JS代碼混淆加密平臺，我們將用JShaman英文版的混淆返回內容做為數據源，繪制一張JS代碼混淆加密流程桑基圖。
JShaman數據采集，直接復制即可：
用d3實現桑基圖繪制，核心代碼如下，文末會提供完整代碼。
繪圖成功：
桑基圖效果說明：從圖中，可以看到JShaman對JS代碼的混淆加密流程：初始的JS代碼，先轉為AST（抽象語法樹），再進行String reverse、Dead Code Insertion、Eval Encryption等數十種混淆加密操作，生成了新的AST，最后再根據AST重新生成JS代碼，這便是JS代碼混淆加密的完整流程，由圖可以讓人一目了然的知曉全過程。
最后，附上完整代碼，如果您也需要繪制桑基圖，可以參考此代碼：
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
