GoJs連線上的信息展示怎么使用

這篇“GoJs連線上的信息展示怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“GoJs連線上的信息展示怎么使用”文章吧。

連線上的信息怎么使用

連線上的文字信息的默認(rèn)顯示

在之前的go.Link一文中提到過(guò)，是通過(guò)linkTemplate連線進(jìn)行配置。下面對(duì)連線上的配置一個(gè)文字顯示來(lái)做一個(gè)簡(jiǎn)單的示例。

nodes: [
    {
      key: "1",
      text: "張三",
      nodeBs: "root",
    },
    {
      key: "1-1",
      text: "李四",
      nodeBs: "root",
    },
    {
      key: "1-2",
      text: "王二",
      nodeBs: "root",
    }
  ],
  links: [
    {
      from: "1",
      to: "1-1",
      text:"父子"
    },
    {
      from: "1",
      to: "1-2",
      text:"兄弟"
    },
    {
      from: "1-1",
      to: "1-2",
      text:"親戚"
    },
  ],
//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv", {layout: $$(go.ForceDirectedLayout)});
  this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Auto",
    $$(go.Shape, "RoundedRectangle", {
      strokeWidth: 1,
      fill: "transparent",
      stroke: "#67B73C",
    }),
    $$(
        go.TextBlock,
        {
            width: 20,
            margin: 20,
        },
        new go.Binding("text", "text")
    )
  );
  this.myDiagram.linkTemplate =
    $$(go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock,                        
        new go.Binding("text", "text"))
    );
  this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

默認(rèn)展示的連線上的文字是水平的，并且是在連線的中間。

對(duì)連線顯示的信息增加其他繪圖模板

this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),
    $$(
      go.Panel,
      "Auto", 
      $$(go.Shape, "TriangleDown", { fill: "#67B73C", stroke: "#FF9900" }),
      $$(go.TextBlock, { margin: 5 }, new go.Binding("text", "text"))
    )
);

從上面的圖形可以看出，可以對(duì)連線使用其他的繪圖模板進(jìn)行關(guān)系信息的顯示內(nèi)容更加豐富?？梢愿鶕?jù)自己不同的需求去顯示出不同的連線樣式。

修改文字和連線方向平行

this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock, {segmentOrientation: go.Link.OrientUpright},new go.Binding("text", "text"))
);

如果需要連線上的文字隨著連線的方向，則需要設(shè)置文本模板(go.TextBlock)的屬性segmentOrientation:go.Link.OrientUpright。

兩個(gè)節(jié)點(diǎn)之間有多個(gè)關(guān)系

//連線數(shù)據(jù)
{
  from: "1",
  to: "1-2",
  text: "上方",
  text1: "線上",
  text2: "下方",
  text3: "起點(diǎn)",
  text4: "終點(diǎn)",
},
//連線模板
this.myDiagram.linkTemplate = $$(
    go.Link,
    $$(go.Shape),                           
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, -20),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text")),
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, 0),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text1")),
    $$(go.TextBlock,{ segmentOffset: new go.Point(0, 20),segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text2")),
    $$(go.TextBlock,{ segmentIndex: 0,segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text3")),
    $$(go.TextBlock,{ segmentIndex: 1,segmentOrientation: go.Link.OrientUpright }, new go.Binding("text", "text4")),
);

如果兩個(gè)節(jié)點(diǎn)之間有多個(gè)關(guān)系或者有其他信息需要展示的話，可以利用segmentOffset屬性和segmentIndex來(lái)調(diào)整連線上的信息展示的位置，其中segmentOffset設(shè)置的是距離線的位置，其中new go.Point(0, 0)，則是在連線的中心位置并且連線在文字中間穿過(guò)。segmentIndex線上位置，其中0是起點(diǎn)位置，1是終點(diǎn)位置。segmentIndex設(shè)置的屬性值不能設(shè)置小數(shù)，如果設(shè)置為小數(shù)的話則會(huì)被四舍五入放到起點(diǎn)或者終點(diǎn)。

以上就是關(guān)于“GoJs連線上的信息展示怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。