樹佈局演算法

zxl20070701發表於2023-01-10
演算法

簡介

這是一個純粹的演算法，本身不提供繪圖功能，可是，基於此演算法你可以非常容易的完成各種樹圖的繪製。

本演算法本身是平臺無關的，可以在所有支援JS和TS的環境中使用，包括H5、各種小程式、uni-app等。

示例截圖

溫馨提示：使用中如果遇到任何問題，都可以點選此處給我們提Issue。

引入

你需要執行下面的安裝命令：

npm install --save jsdoor

然後在需要使用地方引入：

import treeLayout from 'jsdoor/treeLayout/index.js';

建立計算物件

此演算法是用於計算一個樹結構的座標的方法，傳遞配置config就可以獲取樹物件例項：

var treeObj=treeLayout(config);

配置資料結構

config是一個鍵值對格式的配置json，由於原始資料格式不一定，你需要傳遞資料格式的配置：

  • "root":function(initTree){ /返回根結點/ }
  • "id":function(treedata){ /返回id/ }
  • "child":function(parentTree, initTree){ /返回孩子結點/ }
溫馨提示：另外，你還可以透過tree.root()、tree.id()和tree.child()方法，隨時調整配置。

使用物件計算

現在傳遞資料data進行計算即可：

var resultData=treeObj(data);

返回的資料結構

resultData是計算後帶有結點座標的資料，格式如下：

{node: {
  "XXX":{
      children: []
      data: any
      id: string||number
      left: number
      pid: any
      top: number
  },
  ...
}, root: string||number, size: number, deep: number}

node記錄的是每個結點的資訊，每個結點中的left和top就是該結點應該繪製的位置，data是結點的原始資料。

可能你已經發現了，樹圖分為很多種（圓形樹，倒樹等），上面並沒有配置這些資訊,是的，因為可能的樹圖無法預測，我們這裡選擇了一種最簡單的模型，方便具體使用的時候可以在此基礎上快速開發。

這是一棵從左到右，根節點位於左中心，每個節點位於一個1x1的正方形中心的單元樹。

比如上圖結點『油畫』的資料如下：

"油畫":{
  children: [];
  data: (2) ["油畫", "手繪"];
  id: "油畫";
  left: 1.5;
  pid: "手繪";
  top: 1.5
}

相關文章