當然，這裡的我隻是用簡單的圖形來表示裝置，腦洞大開的你當然可以将其換成更有意思的模型。
接下來看看我們是怎麼做到的：
1、準備工作：
如上圖所示，透視投影最終顯示到螢幕上的内容隻有截頭椎體部分的内容，是以 GraphView 提供了 eye，center，up，far，near， fovy 和 aspect 參數來控制截頭椎體的具體範圍，我們在實際運用中用到更多的是 eye 和 center：
getEye() | setEye([x, y, z])，決定眼睛（或 Camera）所在位置，預設值為 [0, 300, 1000]；
getCenter() | setCenter([x, y, z])，決定目标中心點（或 Target）所在位置，預設值為 [0, 0, 0]；
2、建立裝置：
平台上的裝置，我們一共建立了 32 個裝置：
為了讓建立的裝置在平台上的布局更加合理，根據 index 計算出裝置擺放角度，并且根據圓柱中心，圓盤半徑和角度計算出每個裝置擺放的位置：
其他裝置，
3、連線
用 ht.Default.setEdgeType(type, func, mutual) 函數可用于自定義新連線類型：
type：字元串類型的連線類型，對應 style 的 edge.type 屬性；
func：函數類型，根據傳入參數（edge，gap，graphView，sameSourceWithFirstEdge）傳回連線走向資訊
edge：目前連線對象；
gap：多條連線成捆時，本連線對象對應中心連線的間距；
graphView：目前對應拓撲元件對象；
sameSourceWithFirstEdge：boolean 類型，改連線是否與同組的第一條同源；
傳回值為 {points： new ht.List(...)，segments：new ht.List(...)} 結構的連線走向資訊，segments 可取值如下：
1、moveTo，占用 1 個點資訊；
2、lineTo，占用 1 個點資訊；
3、quadraticCurveTo，占用 2 個點資訊；
4、bezierCurveTo，占用 3 個點資訊；
5、closePath，不占用點資訊；
在 Demo 中定義了兩種類型的連線，分别為 line1 和 line：