<span =“Apple-tab-span” style=“white-space: pre;”><span =“Apple-tab-span” style=“white-space: pre;”> - So May I know how to increase line spacing between two lines/links ? ( check out red color highlighted box where you can see vertical lines)
If the diagram is tree-structured, and if the TreeLayout hasn’t been modified to cause any nodes to overlap, there can never be any unrelated links that would have coincident segments.
But you might want to consider using the whole node as a port and using a “Side” Spot, such as fromSpot == go.Spot.RightSide. It appears from your screenshot that you are specifying a specific toSpot and a specific fromSpot, but if you use “Side” Spot the links will automatically be separated from each other at the port. Please read http://gojs.net/latest/intro/connectionPoints.html for more information.
Hi Walter,
Is there a way to control distance between links in other layouts? I thought setting Link’ “margin” inherited from GraphObject might work, but it does not.
Regards,
Yefim
To clarify what I am talking about I just moved around nodes in DynamicPorts.html sample. As you can see,
links can run very close or overlap each other, and the question is how to define a minimal space between them.
Both the standard routing and the custom routing used in that sample do not take into account the routing of any other links. So there’s no easy solution for your problem. I suppose you could further customize the CustomLink class in that sample by overriding computePoints to call the base method and then and make whatever adjustments to the route that you like. But what you want is not easy to accomplish well.
What would you expect to happen when there are N+1 links in a space with room for only N links?
Thank you for your response and clarification. Your question about N+1 links is a perfect example we - development - ask people who write requirements. In this case they most likely would add a cause like: If in a particular segment links with defined strikes and margins do not fit between nodes, such a segment has to collapse into a single link with a different graphical representation. And due to the fact that individual segments do not have their own graphical attributes, an implementation might involve more than only a custom link involved.
I think what you are suggesting for that case only works well if there are multiple links connecting the same two ports (or nodes). Then “collapsing” them into a single (thicker?) link makes sense. I have an example of that.
But that doesn’t help you with making sure that there is always a certain spacing around each middle link segment. Maybe we can work on this for the future. Sorry, I cannot make any promises.
<!DOCTYPE html>
<html>
<head>
<title>Merged Links</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagram",
{ initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Shape, "Circle",
{ width: 30, height: 30, fill: "lightgray",
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true
}),
$(go.TextBlock,
new go.Binding("text", "key")),
{ // assume only one port per node
linkConnected: function(node, link) {
updateLinkWidths(link.fromNode, link.toNode);
},
linkDisconnected: function(oldnode, link) {
updateLinkWidths(link.fromNode, link.toNode, link);
}
}
);
function updateLinkWidths(node1, node2, ignore) {
if (node1 === null || node2 === null) return;
var main = null;
var total = 0;
var it = node1.findLinksBetween(node2);
while (it.next()) {
var l = it.value;
if (l === ignore) continue;
if (main === null) {
main = l;
} else {
l.opacity = 0; // whole Link, not just path Shape
}
total++;
}
if (main !== null) {
main.opacity = 1;
main.path.strokeWidth = total;
var ah = main.findObject("AH");
if (ah !== null) ah.strokeWidth = total;
var tb = main.findObject("TB");
if (tb !== null) tb.text = total.toString();
}
}
// doesn't work for reflexive links
myDiagram.linkTemplate =
$(go.Link,
{ curviness: 0, relinkableFrom: true, relinkableTo: true },
$(go.Shape),
$(go.Shape, { name: "AH", toArrow: "OpenTriangle" }),
$(go.TextBlock, { name: "TB" })
);
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
],[
{ from: "Alpha", to: "Beta" }
]);
}
</script>
</head>
<body onload="init()">
<div id="myDiagram" style="border: solid 1px black; width:100%; height:600px"></div>
<p>
Duplicate Links between Nodes are merged into a single Link whose strokeWidth is set to the number of links.
</p>
<p>
This chooses one link among the duplicates to be made "thick"; it sets the opacity of all the other links to be zero.
It is also possible to change the visibility of the links instead of their opacity, but that would affect code that
ignores non-visible parts.
</p>
</body>
</html>
