樹佈局演算法

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
}

相關文章