GoJs連線繪圖模板Link使用示例詳解
前言
可視化圖形中除了攜帶很多信息的節(jié)點(diǎn)(node)之外，還需要知道他們之間的關(guān)系，而鏈接他們之間的連線在gojs中是使用go.link進(jìn)行繪制。在渲染的時(shí)候我們根據(jù)數(shù)據(jù)的from和to會(huì)默認(rèn)渲染 連線,而如果需要自定義連線的樣式和線上的文字描述，就需要進(jìn)行自定義了?？梢灾苯訉?duì)go.js的實(shí)例linkTemplate進(jìn)行配置。
go.link的簡(jiǎn)單使用
//data
nodes: [
{
key: "1",
text: "三國(guó)人物志",
},
{
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);
這樣就可以對(duì)連線的顏色進(jìn)行了一個(gè)簡(jiǎn)單的修改
go.Link的屬性配置
{
routing: go.Link.Orthogonal, // 設(shè)置連線和節(jié)點(diǎn)不重疊
curve: go.Link.JumpGap, // 設(shè)置交叉線的交叉部分的處理方式
corner: 3, // 連線拐角處的弧度
toEndSegmentLength: 30, //設(shè)置連線拐點(diǎn)到目標(biāo)節(jié)點(diǎn)的距離
fromEndSegmentLength: 30, //設(shè)置起始點(diǎn)到連線拐點(diǎn)的距離
fromShortLength:3, //設(shè)置連線的起始點(diǎn)到起始端口的距離
toShortLength:3, //設(shè)置連線的結(jié)尾處到目標(biāo)節(jié)點(diǎn)端口的距離
selectable: false, //設(shè)置連線是否可以選擇
fromSpot: go.Spot.LeftRightSides, //設(shè)置連線出發(fā)點(diǎn)的端口
toSpot: go.Spot.LeftRightSides, //設(shè)置連線終點(diǎn)的端口
},
routing屬性
routing屬性是設(shè)置連線過(guò)程中是否避開(kāi)路徑上的節(jié)點(diǎn),示例中分別采用三種屬性配置進(jìn)行顯示
//data
nodes: [
{
key: "1",
text: "三國(guó)人物志",
},
{
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則是正常避開(kāi)。go.Link.Orthogonal則是穿過(guò)節(jié)點(diǎn)。go.Link.AvoidsNodes也是會(huì)避開(kāi)穿過(guò)節(jié)點(diǎn)，但是其顯示和go.Link.Normal顯示不同。go.Link.AvoidsNodes的計(jì)算算法更為復(fù)雜，其可以穿過(guò)很多節(jié)點(diǎn)的的復(fù)雜布局判斷，但是特別消耗性能，如果是老舊設(shè)備可以不考慮這種屬性配置。
curve屬性
curve屬性是交叉線時(shí)的數(shù)據(jù)顯示情況，其屬性有四個(gè)值分別是go.Link.Nothing、 go.Link.Bezier、 go.Link.JumpGap 或 go.Link.JumpOver，數(shù)據(jù)和上方類(lèi)似，更改屬性后go.Link.Nothing、go.Link.Bezier顯示內(nèi)容分別如下
go.Link.JumpGap顯示是這樣的
go.Link.JumpOver顯示是這樣的
corner、toEndSegmentLength、fromEndSegmentLength、fromShortLength、toShortLength屬性
corner屬性為拐角處的圓角，toEndSegmentLength則是設(shè)置連線拐點(diǎn)到目標(biāo)節(jié)點(diǎn)的距離，fromEndSegmentLength是設(shè)置起始點(diǎn)到連線拐點(diǎn)的距離，fromShortLength是設(shè)置連線的起始點(diǎn)到起始端口的距離，toShortLength是設(shè)置連線的結(jié)尾處到目標(biāo)節(jié)點(diǎn)端口的距離。
未設(shè)置屬性之前的圖形如下
設(shè)置屬性如下
{
corner: 10,
toEndSegmentLength: 100,
fromEndSegmentLength: 100,
fromShortLength:5,
toShortLength:5
}
其顯示內(nèi)容如下
對(duì)比可以看出對(duì)應(yīng)的設(shè)置的屬性的作用
selectable、fromSpot、toSpot屬性
selectable屬性是設(shè)置是否可以選擇連線是否可以選擇。其選中效果為中間那條線的效果，如果設(shè)置為false。則不能選擇，也就不能通過(guò)選中獲取到link的數(shù)據(jù)。fromSpot屬性則是設(shè)置其實(shí)節(jié)點(diǎn)的端口，下面例子中則是選擇為左邊，以方便對(duì)默認(rèn)做一個(gè)區(qū)分。toSpot屬性則是目標(biāo)節(jié)點(diǎn)的連線端口，為了區(qū)分設(shè)置為右側(cè)。
{
routing: go.Link.Orthogonal,
fromSpot: go.Spot.Left,
toSpot: go.Spot.Right
}
總結(jié)
go.link的配置主要是為了豐富圖形中節(jié)點(diǎn)之間的關(guān)系的顯示，以及復(fù)雜關(guān)系中交叉的樣式，使圖形中節(jié)點(diǎn)之間的關(guān)系更加明朗。
以上就是GoJs連線繪圖模板Link使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs連線繪圖模板Link的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JS實(shí)現(xiàn)圖片高亮展示效果實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片高亮展示效果的方法,實(shí)例分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
表格隔行換色升級(jí)版,直接用javascript實(shí)現(xiàn)。2009-11-11
正如標(biāo)題所言使用js如何判斷不同系統(tǒng)的瀏覽器類(lèi)型，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
這篇文章主要介紹了JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的朋友可以參考下2020-04-04
JavaScript函數(shù)定義方法實(shí)例詳解
這篇文章主要介紹了JavaScript函數(shù)定義方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript函數(shù)的聲明、定義、調(diào)用等原理與常見(jiàn)操作技巧,需要的朋友可以參考下2019-03-03
JavaScript實(shí)現(xiàn)封閉區(qū)域布爾運(yùn)算的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)封閉區(qū)域布爾運(yùn)算的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門(mén)和TAB選項(xiàng)卡實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門(mén)和TAB選項(xiàng)卡效果,通過(guò)簡(jiǎn)單的自定義切換函數(shù)setTab實(shí)現(xiàn)頁(yè)面元素的遍歷及屬性切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript作用域、閉包、對(duì)象與原型鏈概念及用法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript作用域、閉包、對(duì)象與原型鏈,結(jié)合實(shí)例形式總結(jié)分析了javascript中變量與函數(shù)的作用域、閉包、對(duì)象、原形鏈相關(guān)概念、用法及注意事項(xiàng),需要的朋友可以參考下2018-08-08
Relative是position的一個(gè)屬性，是相對(duì)定位，通過(guò)本篇文章給大家介紹Position屬性之relative用法，對(duì)position屬性relative相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
我喜歡引用這句話，“程序是對(duì)復(fù)雜性的管理”。計(jì)算機(jī)世界是一個(gè)巨大的抽象建筑群。我們簡(jiǎn)單的包裝一些東西然后發(fā)布新工具，周而復(fù)始。現(xiàn)在思考下，你所使用的語(yǔ)言包括的一些內(nèi)建的抽象函數(shù)或是低級(jí)操作符。這在JavaScript里是一樣的2014-03-03