GoJs連線繪圖模板Link使用示例詳解
前言
可視化圖形中除了攜帶很多信息的節(jié)點(node)
之外,還需要知道他們之間的關(guān)系,而鏈接他們之間的連線在gojs
中是使用go.link
進(jìn)行繪制。在渲染的時候我們根據(jù)數(shù)據(jù)的from
和to
會默認(rèn)渲染 連線,而如果需要自定義連線的樣式和線上的文字描述,就需要進(jìn)行自定義了??梢灾苯訉?code>go.js的實例linkTemplate
進(jìn)行配置。
go.link的簡單使用
//data nodes: [ { key: "1", text: "三國人物志", }, { key: "1-1", text: "曹丕", }, { key: "1-2", text: "劉備", }, { key: "1-3", text: "孫權(quán)", }, ], links: [ { from: "1", to: "1-1", }, { from: "1", to: "1-2", }, { from: "1", to: "1-3", }, ], //methods this.myDiagram = $$(go.Diagram, "myDiagramDiv", {layout: $$(go.TreeLayout)}); this.myDiagram.nodeTemplate = $$( go.Node, "Horizontal", $$(go.TextBlock,{background:"#67B73C"},new go.Binding("text", "text")), ); this.myDiagram.linkTemplate = $$( go.Link,$$(go.Shape,{stroke: "#00FFCC"}) ); this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);
這樣就可以對連線的顏色進(jìn)行了一個簡單的修改
go.Link的屬性配置
{ routing: go.Link.Orthogonal, // 設(shè)置連線和節(jié)點不重疊 curve: go.Link.JumpGap, // 設(shè)置交叉線的交叉部分的處理方式 corner: 3, // 連線拐角處的弧度 toEndSegmentLength: 30, //設(shè)置連線拐點到目標(biāo)節(jié)點的距離 fromEndSegmentLength: 30, //設(shè)置起始點到連線拐點的距離 fromShortLength:3, //設(shè)置連線的起始點到起始端口的距離 toShortLength:3, //設(shè)置連線的結(jié)尾處到目標(biāo)節(jié)點端口的距離 selectable: false, //設(shè)置連線是否可以選擇 fromSpot: go.Spot.LeftRightSides, //設(shè)置連線出發(fā)點的端口 toSpot: go.Spot.LeftRightSides, //設(shè)置連線終點的端口 },
routing屬性
routing
屬性是設(shè)置連線過程中是否避開路徑上的節(jié)點,示例中分別采用三種屬性配置進(jìn)行顯示
//data nodes: [ { key: "1", text: "三國人物志", }, { key: "1-1", text: "曹丕", }, { key: "1-1-1", text: "曹叡", }, { key: "1-2", text: "劉備", }, { key: "1-2-1", text: "劉禪", }, { key: "1-3", text: "孫權(quán)", }, { key: "1-3-1", text: "孫亮", }, ], links: [ { from: "1", to: "1-1", routing: go.Link.AvoidsNodes, text:'AvoidsNodes' }, { from: "1", to: "1-1-1", routing: go.Link.AvoidsNodes, text:'AvoidsNodes' }, { from: "1-1", to: "1-1-1", routing: go.Link.AvoidsNodes, text:'AvoidsNodes' }, { from: "1", to: "1-2", routing: go.Link.Orthogonal, text:'Orthogonal' }, { from: "1", to: "1-2-1", routing: go.Link.Orthogonal, text:'Orthogonal' }, { from: "1-2", to: "1-2-1", routing: go.Link.Orthogonal, text:'Orthogonal' }, { from: "1", to: "1-3", routing: go.Link.Normal, text:'Normal' }, { from: "1", to: "1-3-1", routing: go.Link.Normal, text:'Normal' }, { from: "1-3", to: "1-3-1", routing: go.Link.Normal, text:'Normal' }, ],
可以看出設(shè)置routing
屬性為go.Link.Normal
則是正常避開。go.Link.Orthogonal
則是穿過節(jié)點。go.Link.AvoidsNodes
也是會避開穿過節(jié)點,但是其顯示和go.Link.Normal
顯示不同。go.Link.AvoidsNodes
的計算算法更為復(fù)雜,其可以穿過很多節(jié)點的的復(fù)雜布局判斷,但是特別消耗性能,如果是老舊設(shè)備可以不考慮這種屬性配置。
curve屬性
curve
屬性是交叉線時的數(shù)據(jù)顯示情況,其屬性有四個值分別是go.Link.Nothing
、 go.Link.Bezier
、 go.Link.JumpGap
或 go.Link.JumpOver
,數(shù)據(jù)和上方類似,更改屬性后go.Link.Nothing
、go.Link.Bezier
顯示內(nèi)容分別如下
go.Link.JumpGap
顯示是這樣的
go.Link.JumpOver
顯示是這樣的
corner、toEndSegmentLength、fromEndSegmentLength、fromShortLength、toShortLength屬性
corner
屬性為拐角處的圓角,toEndSegmentLength
則是設(shè)置連線拐點到目標(biāo)節(jié)點的距離,fromEndSegmentLength
是設(shè)置起始點到連線拐點的距離,fromShortLength
是設(shè)置連線的起始點到起始端口的距離,toShortLength
是設(shè)置連線的結(jié)尾處到目標(biāo)節(jié)點端口的距離。
未設(shè)置屬性之前的圖形如下
設(shè)置屬性如下
{ corner: 10, toEndSegmentLength: 100, fromEndSegmentLength: 100, fromShortLength:5, toShortLength:5 }
其顯示內(nèi)容如下
對比可以看出對應(yīng)的設(shè)置的屬性的作用
selectable、fromSpot、toSpot屬性
selectable
屬性是設(shè)置是否可以選擇連線是否可以選擇。其選中效果為中間那條線的效果,如果設(shè)置為false
。則不能選擇,也就不能通過選中獲取到link
的數(shù)據(jù)。fromSpot
屬性則是設(shè)置其實節(jié)點的端口,下面例子中則是選擇為左邊,以方便對默認(rèn)做一個區(qū)分。toSpot
屬性則是目標(biāo)節(jié)點的連線端口,為了區(qū)分設(shè)置為右側(cè)。
{ routing: go.Link.Orthogonal, fromSpot: go.Spot.Left, toSpot: go.Spot.Right }
總結(jié)
go.link
的配置主要是為了豐富圖形中節(jié)點之間的關(guān)系的顯示,以及復(fù)雜關(guān)系中交叉的樣式,使圖形中節(jié)點之間的關(guān)系更加明朗。
以上就是GoJs連線繪圖模板Link使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于GoJs連線繪圖模板Link的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于Electron實現(xiàn)桌面應(yīng)用開發(fā)代碼實例
這篇文章主要介紹了基于Electron實現(xiàn)桌面應(yīng)用開發(fā)代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導(dǎo)航條效果
這篇文章主要介紹了js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導(dǎo)航條效果,涉及javascript鼠標(biāo)事件及頁面元素樣式的動態(tài)切換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08window.location不跳轉(zhuǎn)的問題解決方法
window.location的跳轉(zhuǎn)失效的情況有沒有遇到過啊,這主要是冒泡傳遞影響了,下面有個不錯的解決方法,大家可以參考下2014-04-04javascript隨機(jī)將第一個dom中的圖片添加到第二個div中示例
此代碼的是一個簡單的例子,將第一個div中的五張圖片中,提取隨機(jī)兩張顯示到第二個div中,具體實現(xiàn)如下,感興趣的朋友可以參考下2013-10-10jQuery animate()實現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
這篇文章主要介紹了jQuery animate()實現(xiàn)背景色漸變效果的處理方法,結(jié)合實例形式分析了jQuery顏色插件jquery.color.js實現(xiàn)背景色漸變的簡單操作技巧,需要的朋友可以參考下2017-03-03用javascript取得傳遞參數(shù)的個數(shù)的代碼
用javascript取得傳遞參數(shù)的個數(shù)的代碼...2007-10-10uni-app小程序?qū)崿F(xiàn)微信在線聊天功能(私聊/群聊)
這篇文章主要介紹了uni-app小程序?qū)崿F(xiàn)微信在線聊天(私聊/群聊),今天記錄一下項目核心功能的實現(xiàn)過程。頁面UI以及功能邏輯全部來源于微信,即時聊天業(yè)務(wù)的實現(xiàn)使用socket.io,前端使用uni-app開發(fā),后端服務(wù)器基于node實現(xiàn),數(shù)據(jù)庫選擇mongoDB,需要的朋友可以參考下2023-02-02