如何用CSS手刻流程圖/關係結構圖的線的部分?

react typescript ant design ant chart ui

Skywalker 2023-03-29 21:59:23 ‧ 1844 瀏覽

如題，目前在做一個流程圖/關係結構圖表

嘗試用了ant chart的FlowAnalysisGraph，但在ts中會報錯

所以改成用手刻，方框的部分我會，但是線的部分我不知道該怎麼寫，也包括哪條線該從哪個方框連到哪個方框的邏輯不會寫...

目前想到的方法是，需要得到每個被新創建的方框的x跟y(可以說是位置吧)，可是感覺如果要RWD的話，那就會變得很複雜

所以不知道怎麼辦，只能跑上來發問

想做FlowAnalysisGraph的這種感覺，我上面說的每個方框，就是一個Card component，但是線的部分真的不知道如何實現..
https://charts.ant.design/zh/examples/relation-graph/flow-analysis-graph#layout

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

Felix

iT邦研究生 2 級 ‧ 2023-03-30 06:39:34

圖表工具不是只有一個，一定要手刻嗎？
就算要手刻，也是用 SVG 刻，不會用 CSS 刻。

多數圖表都能使用 Diagrams.net 繪製，包括但不限於流程圖和結構圖，繪製完畢也能選擇 SVG 匯出。

Skywalker iT邦新手 5 級 ‧ 2023-03-30 06:58:13 檢舉

是啊能用的套件有限制，所以ant chart如果不用，我就只能手刻
Svg的話，不太確定是否能符合我的需求，因為我還需要搭配js去讓它動態的增減節點的數量（點擊事件、拖曳事件等），也得依照節點的數量去改變線的路徑、方向等，而不是固定的一張圖而已

Felix iT邦研究生 2 級 ‧ 2023-03-30 07:20:19 檢舉

試試 Mermaid 吧！這個套件應該能符合需求，不僅語法簡單，也支援動態操作，更不用擔心 RWD 的問題。

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

IT邦幫忙