如何使用原生JavaScript繪製複雜的、可定制的魚骨圖？

原生JavaScript繪製複雜魚骨圖詳解

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

文章基於一個用戶提供的複雜魚骨圖示例（見上圖），該圖包含多級子節點和節點文本信息，因此選擇原生SVG繪製方式，直接在HTML中創建SVG元素構建魚骨圖，以獲得更高的靈活性。

代碼首先定義一個JSON數據結構arr ，存儲魚骨圖的節點和連接關係。每個節點包含label （標籤）、 value （值）、 type （類型）、 time （時間）和child （子節點）等屬性。 核心部分是FishBone類，負責解析數據並使用SVG元素進行繪製。

FishBone類包含以下關鍵方法：

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

代碼已實現大部分功能，包括月份節點寬度自適應、文本長度自適應以及基本圖形繪製。但仍有以下待完善部分：

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

這些功能需要根據實際需求補充完善。代碼已預留相關接口和變量，方便擴展。例如，可在arr數據中添加事件屬性，並在創建元素時綁定事件監聽器實現節點事件。

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

以上是如何使用原生JavaScript繪製複雜的、可定制的魚骨圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！