如何使用原生JavaScript繪制復(fù)雜的、可定制的魚骨圖？

原生JavaScript繪制復(fù)雜魚骨圖詳解

本文介紹如何使用純JavaScript代碼繪制復(fù)雜的、可定制的魚骨圖，無需借助第三方庫如G6。我們將深入探討代碼實現(xiàn)，并指出代碼中尚待完善的部分。

文章基于一個用戶提供的復(fù)雜魚骨圖示例（見上圖），該圖包含多級子節(jié)點和節(jié)點文本信息，因此選擇原生SVG繪制方式，直接在html中創(chuàng)建SVG元素構(gòu)建魚骨圖，以獲得更高的靈活性。

代碼首先定義一個json數(shù)據(jù)結(jié)構(gòu)arr，存儲魚骨圖的節(jié)點和連接關(guān)系。每個節(jié)點包含label（標簽）、value（值）、type（類型）、time（時間）和child（子節(jié)點）等屬性。 核心部分是FishBone類，負責(zé)解析數(shù)據(jù)并使用SVG元素進行繪制。

立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；

FishBone類包含以下關(guān)鍵方法：

• initKvArray()：遍歷數(shù)據(jù)，計算每個月份節(jié)點的寬度，并存儲在kvArray中。寬度根據(jù)子節(jié)點中最長文本長度自適應(yīng)調(diào)整。
• getMaxWidth()：遞歸計算每個節(jié)點及其子節(jié)點中最長文本寬度，確定節(jié)點寬度。
• randerMonthBox()：繪制月份節(jié)點（平行四邊形）及其文本。月份節(jié)點的x坐標根據(jù)前一個節(jié)點寬度累加計算。
• creatBigCircle()：繪制主干節(jié)點（圓圈）和連接線，并遞歸調(diào)用renderParent()繪制子節(jié)點。
• renderParent()：遞歸繪制子節(jié)點，并計算子節(jié)點高度。
• randerLeaf()：繪制最底層葉子節(jié)點。
• getMaxChildHeight()：遞歸計算每個節(jié)點的最大子節(jié)點數(shù)量，確定子節(jié)點排列方式。
• getLineWidth()：計算文本寬度，設(shè)置最小寬度，確保線條足夠長以容納文本。
• createTag()：輔助函數(shù)，創(chuàng)建SVG元素。
• createMonth()：輔助函數(shù)，創(chuàng)建月份節(jié)點。

代碼已實現(xiàn)大部分功能，包括月份節(jié)點寬度自適應(yīng)、文本長度自適應(yīng)以及基本圖形繪制。但仍有以下待完善部分：

• 子集展開/收縮功能： 允許用戶展開或收縮子節(jié)點，提高交互性。
• 線條顏色配置： 允許用戶自定義線條顏色，增強視覺效果。
• 整體收縮/展開功能： 允許用戶一次性展開或收縮整個魚骨圖。
• 圖自適應(yīng)大小功能： 根據(jù)內(nèi)容自動調(diào)整魚骨圖大小，適應(yīng)不同屏幕尺寸。
• 節(jié)點事件綁定： 允許用戶與節(jié)點交互，例如點擊節(jié)點顯示更多信息。

這些功能需要根據(jù)實際需求補充完善。代碼已預(yù)留相關(guān)接口和變量，方便擴展。例如，可在arr數(shù)據(jù)中添加事件屬性，并在創(chuàng)建元素時綁定事件監(jiān)聽器實現(xiàn)節(jié)點事件。

此代碼提供了一個功能完善的魚骨圖基礎(chǔ)，用戶可根據(jù)自身需求進行定制和擴展，原生SVG的特性保證了靈活性與可控性。