这篇“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);
默认展示的连线上的文字是水平的，并且是在连线的中间。
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"))
)
);
从上面的图形可以看出，可以对连线使用其他的绘图模板进行关系信息的显示内容更加丰富。可以根据自己不同的需求去显示出不同的连线样式。
this.myDiagram.linkTemplate = $$(
go.Link,
$$(go.Shape),
$$(go.TextBlock, {segmentOrientation: go.Link.OrientUpright},new go.Binding("text", "text"))
);
如果需要连线上的文字随着连线的方向，则需要设置文本模板(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")),
);
如果两个节点之间有多个关系或者有其他信息需要展示的话，可以利用segmentOffset属性和segmentIndex来调整连线上的信息展示的位置，其中segmentOffset设置的是距离线的位置，其中new go.Point(0, 0)，则是在连线的中心位置并且连线在文字中间穿过。segmentIndex线上位置，其中0是起点位置，1是终点位置。segmentIndex设置的属性值不能设置小数，如果设置为小数的话则会被四舍五入放到起点或者终点。
以上就是关于“GoJs连线上的信息展示怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7226665757882171450
