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