温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

GoJs连线上的信息展示怎么使用

发布时间:2023-04-28 16:21:05 来源:亿速云 阅读:105 作者:iii 栏目:开发技术

这篇“GoJs连线上的信息展示怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“GoJs连线上的信息展示怎么使用”文章吧。

连线上的信息怎么使用

连线上的文字信息的默认显示

在之前的go.Link一文中提到过,是通过linkTemplate连线进行配置。下面对连线上的配置一个文字显示来做一个简单的示例。

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

GoJs连线上的信息展示怎么使用

默认展示的连线上的文字是水平的,并且是在连线的中间。

对连线显示的信息增加其他绘图模板

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

GoJs连线上的信息展示怎么使用

从上面的图形可以看出,可以对连线使用其他的绘图模板进行关系信息的显示内容更加丰富。可以根据自己不同的需求去显示出不同的连线样式。

修改文字和连线方向平行

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

GoJs连线上的信息展示怎么使用

如果需要连线上的文字随着连线的方向,则需要设置文本模板(go.TextBlock)的属性segmentOrientation:go.Link.OrientUpright

两个节点之间有多个关系

//连线数据
{
  from: "1",
  to: "1-2",
  text: "上方",
  text1: "线上",
  text2: "下方",
  text3: "起点",
  text4: "终点",
},
//连线模板
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")),
);

GoJs连线上的信息展示怎么使用

如果两个节点之间有多个关系或者有其他信息需要展示的话,可以利用segmentOffset属性和segmentIndex来调整连线上的信息展示的位置,其中segmentOffset设置的是距离线的位置,其中new go.Point(0, 0),则是在连线的中心位置并且连线在文字中间穿过。segmentIndex线上位置,其中0是起点位置,1是终点位置。segmentIndex设置的属性值不能设置小数,如果设置为小数的话则会被四舍五入放到起点或者终点。

以上就是关于“GoJs连线上的信息展示怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI