javascript - 链接标签彼此重叠
问题描述
我创建了两个正方形,并通过它们的端口将它们与链接连接起来。但是当我创建两个以上的链接时,它们的链接标签开始重叠(您可以在下面的屏幕截图中看到这一点)。GoJS 是否有一些选项可以正确对齐或分离标签?
解决方案
我认为问题可能是您正在使用多个端口。假设端口位于节点的一侧,则链接可以与节点连接的位置没有太多选择。
相反,具有单个端口的节点的默认行为可能是您正在寻找的:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location"),
$(go.Shape,
{ fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
//{ curve: go.Link.Bezier },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" }),
$(go.TextBlock, { background: "white" },
new go.Binding("text"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", location: new go.Point(0, 0) },
{ key: 2, text: "Beta", color: "orange", location: new go.Point(200, 50) },
{ key: 3, text: "Gamma", color: "lightgreen", location: new go.Point(50, 200) }
],
[
{ from: 1, to: 2, text: "12" },
{ from: 1, to: 2, text: "a long label" },
{ from: 2, to: 1, text: "345" },
{ from: 1, to: 3, text: "13" },
{ from: 1, to: 3, text: "short" },
{ from: 3, to: 1, text: "34567890" }
]);
}
产生:
或者,如果您指定 Bezier 曲线链接:
移动节点,您可以看到链接之间的距离如何根据链接标签的宽度而变化,因为标签不是圆形的。
推荐阅读
- android - 如何根据某些操作从活动堆栈中删除特定活动/活动?
- jestjs - 如何防止 babel-jest 在项目中使用 babel 配置文件?
- excel - 除非在工作表上满足条件,否则禁用表单控制按钮
- ios - iOS - 由于“内部”保护级别(来自我的 pod),无法访问“val”
- openstreetmap - 如何在 Overpass QL 中查找路径内的节点?
- apache-kafka - Kafka Streams - 在 KTable 上高效计算最小值/最大值
- r - 带有地址的地理编码中的R googleway错误
- azure - Office365:在收件箱 powershell 中关注
- scala - 如何使用播放框架 2.6 WsClient 上传多个文件?
- git - 拉到第二个远程存储库:仅推送