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

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

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

前言

可視化圖形中除了攜帶很多信息的節(jié)點(node)之外，還需要知道他們之間的關(guān)系，而鏈接他們之間的連線在gojs中是使用go.link進行繪制。在渲染的時候我們根據(jù)數(shù)據(jù)的from和to會默認渲染 連線,而如果需要自定義連線的樣式和線上的文字描述，就需要進行自定義了?？梢灾苯訉?code>go.js的實例linkTemplate進行配置。

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);

這樣就可以對連線的顏色進行了一個簡單的修改

go.Link的屬性配置

{
    routing: go.Link.Orthogonal, // 設(shè)置連線和節(jié)點不重疊
    curve: go.Link.JumpGap, // 設(shè)置交叉線的交叉部分的處理方式
    corner: 3, // 連線拐角處的弧度
    toEndSegmentLength: 30, //設(shè)置連線拐點到目標節(jié)點的距離
    fromEndSegmentLength: 30, //設(shè)置起始點到連線拐點的距離
    fromShortLength:3, //設(shè)置連線的起始點到起始端口的距離
    toShortLength:3, //設(shè)置連線的結(jié)尾處到目標節(jié)點端口的距離
    selectable: false, //設(shè)置連線是否可以選擇
    fromSpot: go.Spot.LeftRightSides, //設(shè)置連線出發(fā)點的端口
    toSpot: go.Spot.LeftRightSides, //設(shè)置連線終點的端口
},

routing屬性

routing屬性是設(shè)置連線過程中是否避開路徑上的節(jié)點,示例中分別采用三種屬性配置進行顯示

//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的計算算法更為復雜，其可以穿過很多節(jié)點的的復雜布局判斷，但是特別消耗性能，如果是老舊設(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è)置連線拐點到目標節(jié)點的距離，fromEndSegmentLength是設(shè)置起始點到連線拐點的距離，fromShortLength是設(shè)置連線的起始點到起始端口的距離，toShortLength是設(shè)置連線的結(jié)尾處到目標節(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é)點的端口，下面例子中則是選擇為左邊，以方便對默認做一個區(qū)分。toSpot屬性則是目標節(jié)點的連線端口，為了區(qū)分設(shè)置為右側(cè)。

{
  routing: go.Link.Orthogonal, 
  fromSpot: go.Spot.Left, 
  toSpot: go.Spot.Right
}

總結(jié)

go.link的配置主要是為了豐富圖形中節(jié)點之間的關(guān)系的顯示，以及復雜關(guān)系中交叉的樣式，使圖形中節(jié)點之間的關(guān)系更加明朗。

以上就是GoJs連線繪圖模板Link使用示例詳解的詳細內(nèi)容，更多關(guān)于GoJs連線繪圖模板Link的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論