# 「股權結構表」重構套件研究

更新：2022/2/7

## 前情提要

原本使用的「dagre-d3」套件開發的「股權結構表」有幾個無法刻服的問題，但要完全自己手刻工會很大，所以決定手刻之前還是再花一點時間研究一下是否有可能找到其他合用的套件。

dagre-d3的問題：

1. 無法自訂節點的位置（因為股權結構的資料有所謂交叉持股的特殊性，需要自訂義節點在畫面中的階層關係不能亂擺）
2. 連接線很亂
3. 連接線旁的文字（持股百分比）會亂跑，這個應該有辦法自己畫上去，所以其實算是有辦法解決的

找套件的優先條件：

1. 要能自訂節點的座標位置，連接線能夠由套件自動產生為優（因為連接線要定義座標為置屬性會很複雜，這樣就不如全部手刻了）
2. 盡量以 open source為主，文件清楚與否以及是否很多開發者等也會列入考量
3. 使用 d3.js開發較優但不強求，能夠客制的彈性高為優先

## 研究結果說明

為方便閱讀所以直接把結論放在最前面…

**簡單的結論：免費的套件裡沒有找到完全符合需求的；付費套件有幾個看起來可能可用，但實際上使用的彈性以及會不會有問題也待測試確認。**

個人的想法是，我還是比較傾向用免費的，因為免費的用戶較多，比較容易google到相關的討論。另外就是付費 library雖然會有售後服務，但是廠商都在國外且需英文溝通…

以下說明我找到較可用的套件，以我查詢時使用的關鍵字來分類：

1. dag
2. flowchart
3. （其他）

其中，「dag」是「有向無環圖」的意思，這類型的套件能找到較多 open source的，有幾個套件看起來蠻合用，其中 「dagre-d3」就是目前使用中的套件，其優點就是使用 d3.js開發，所以客製的彈性也較高。但有一個硬傷是，這類型的套件的節點擺放位置都是由套件自己的規則來畫的，我找不到能自訂節點座標的方式…

「flowchart」這類型的套件的特性是圖形的屬性要相當高程度的定義，也就是說節點的座標也要定義（剛好有符合我們的需求），但連接線也要定義的話會變得相當麻煩，會期待套件能夠自動幫我們畫（如果連接線也要自訂座標的話會覺得不如全部自己刻了也不需要套件了）。另外，此類套件多為付費套件，雖然也有 open source但看起來頗為陽春（也是用免費不如自己手刻）。目前找到的套件「GoJS」是比較符合需求的，但相當貴…

「其他」類別，其實這邊的圖和流程圖很類似，只是我在查詢的過程中沒有用到 flowchart、或者官方網頁裡沒有用到這樣的字眼。特性大致和 flowchart相同，目前找到的套件「 js-diagram」是比較符合的。

## 關鍵字：dag

### * G6

個人較推薦，只是目前還不知如何改節點位置…

Dagre流程圖 https://g6.antv.vision/zh/examples/net/dagreFlow#basicDagre

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | 1. JSON<br />2. 節點&連接線資料 |
| 價錢 | **免費** |
| 優點 | 1. 免費<br />2. 文件清楚，中文（大陸）開發者應該多<br />3. 連接線會自動避開節點<br />4. 可托曳 |
| 缺點 | 好像沒辦法自訂節點座標（文件查不到） |

### dagre-d3

目前實告上面使用的，也是無法控制節點位置

https://github.com/dagrejs/dagre-d3/wiki#demos

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | 1. JSON<br />2. 節點&連接線資料 |
| 價錢 | **免費** |
| 優點 | 1. 免費<br />2. 有文件<br />3. 連接線會自動避開節點<br />4. 使用d3.js開發，要加東西上去還算好加<br /> |
| 缺點 | 沒辦法自訂節點座標 |

### d3-graphviz

杜老大也有提到過的，使用 [DOT圖形描述語言](https://zh.wikipedia.org/wiki/DOT%E8%AF%AD%E8%A8%80)來繪制有向圖，但同樣無法控制座標

https://codesandbox.io/examples/package/d3-graphviz

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | 1. JSON<br />2. DOT來描述節點和連接線的關係 |
| 價錢 | **免費** |
| 優點 | 1. 免費<br />2. 有文件<br />3. 連接線會自動避開節點<br />4. 使用d3.js開發，要加東西上去還算好加<br /> |
| 缺點 | 沒辦法自訂節點座標 |

## 關鍵字：flowchart

### * GoJS

看起來功能蠻符合需求的，不過要付費

orgChartExtras https://gojs.net/latest/samples/orgChartExtras.html

flowChart https://gojs.net/latest/samples/flowchart.html

stateChart https://gojs.net/latest/samples/stateChart.html

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | 1. JSON<br />2. 節點&連接線資料。節點需要座標，**連接線不需座標（讚讚）** |
| 價錢 | **$6990美金↑**<br />https://nwoods.com/sales/index.html |
| 優點 | 1. 同時具彈性且資料好接<br />2. 連接線會自動避開節點<br />3. 可托曳 |
| 缺點 | 貴 |

### yFiles

這個覺得可以不用考慮但反正都寫了就當參考

dagreFlow https://g6.antv.vision/zh/examples/net/dagreFlow#lrDagreUL

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | graphml（看起來是xml） |
| 價錢 | **$18200美金↑**<br />https://www.yworks.com/products/yfiles-for-html/pricing/#/info |
| 優點 | 1. 連接線會自動避開節點<br />2. 可托曳 |
| 缺點 | 1. 超貴<br />2. 不太確定如何使用（要研究），但看他的xml格式感覺就很麻煩的樣子<br />3. 沒看到文件，需再確認一下如何使用… |

## 其他關鍵字

### * js-diagram

付費程式裡算價錢沒那麼誇張的

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | 1. JSON<br />2. 節點&連接線資料。節點需要座標，**連接線不需座標（讚讚）** |
| 價錢 | **$995美金↑/year**<br />https://nwoods.com/sales/index.html |
| 優點 | 1. 同時具彈性且資料好接<br />2. 連接線會自動避開節點<br />3. 可托曳 |
| 缺點 | 1. 要錢<br />2. 不太確定連接線旁能不能加文字 |

### bpmn-js

好像看到很多library有提到bpmn，感覺好像很多流程圖的套件/付費套件是用他的基礎去做的（？）

https://bpmn.io/toolkit/bpmn-js/

| 特點 | 說明 |
| -------- | ------------------------------------------------------------ |
| 開發方式 | bpmn（看起來是xml） |
| 價錢 | **免費** |
| 優點 | 可托曳 |
| 缺點 | 1. 不太確定如何使用（要研究），但看他的xml格式感覺就很麻煩的樣子<br />2. 沒看到文件，需再確認一下如何使用… |