AntV的G6庫致力於處理關係圖,並且有很好的繫結與使用的介面。但是在實際的需求中,我們需要處理兩個節點間的多度關係,這樣就要求能有較好的邊分佈,或者對於整個圖有更加好的節點分佈計劃。
關於邊的分佈
二維貝塞爾
取最簡單的情況,兩個點,第一個解決方案是使用二維貝塞爾曲線,並且曲線的分散點在兩個點的垂直平分線上:

這樣可以保證是上下離散的點,並且較大限度利用兩個點之間的區域來繪製邊的。

但是在多點多邊的情況下,容易出現起點線段的交集。

所以目前看來,對於多點的複雜情況,應該在分佈點的時候合理根據出入度分佈點。
而且需要解決因為斜率而導致的邊間空隙過大/過小。
下面示例為六個點,共100條邊。

關於文字描述,在貝塞爾曲線正中心可以加上文字的描述,效果如圖:

自己到自己的邊
考慮多度圖中的關係還有自己到自己的邊,所以我們採用圓弧線來表示自己到自己的關係。
確定了中心後,我們要獲取點的半徑,角度以k為變數方便後期調整。
考慮最簡單情況,沿著垂直向上的半徑作圓

接著考慮複雜情況,我們把直徑旋轉k度,並且新增上文字

三個點的情況

弧線連結
考慮這樣一個場景,當一個點到其他兩個點到邊數較多,而到其餘點無邊或者邊數較少時,我們可以使用弧線來對三個點進行連線。
同樣,考慮兩個點的情況,圓心在兩個點的垂直平分線上,這段圓弧經過兩個點,當存在多條圓弧的時候,我們採用取不同的圓心來計算圓弧的形狀。

下面是多邊的情況:

上圖是六個節點,一共一百條邊
一種比較符合設想場景的使用:

進一步的思考 (To Be Done)
功能性構想:可收縮邊
我們可以在邊上新增元件,通過收縮過多的邊關係來簡化檢視。
關於點的分佈
多度圖最主要的一個優化就是需要生成合理的點分佈,所以在點分佈的思路如下
第一個構想:基於圓以及權的點分佈 該分佈遵守兩個規則:
- 普權邊按圓心分佈
- 斷層邊脫手前進
這是根據以上原則做出的點的分佈,可以看出來,是簡單而較為合理的:

第二個構想:基於生成樹的點分佈
- 根據圖的出度以及入度的絕對值相加,將兩個點間所有點算作這條邊的權,一個節點的權為邊權的和,之後根據權的大小,生成最小生成樹。
- 根據節點的權,我們可以將大點分出來,獨立分佈,而小點依次分佈在以大權點為圓心的圓上。
- 若是按照樹來構成,那麼計算出來的樹結構則應該從畫布沿對角線分佈。
相關程式碼可以在github.com/mxz96102/an…找到