欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

GoJs連線繪圖模板Link使用示例詳解

 更新時(shí)間：2023年05月05日 10:28:16   作者：沅芷湘蘭  
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

可視化圖形中除了攜帶很多信息的節(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)文章

最新評(píng)論