HI ,
As i have used the LayeredDigraphLayout layout, so everything works fine but when coming to bi direction links are not parallel. i need to achieve like below image
Can you please suggest me how to achieve the parallel lines without using extension in the LayeredDigraphlayout.
Thank you
Thank you for sketching what you want. Alas you have not shown what you have now, including how your LayeredDigraphLayout is declared.
So I will guess that on your layout you need to set setsPortSpots: false. LayeredDigraphLayout | GoJS API
Thanks Walter, Please find the below image what i had now
Layout configuration
layout: me.goObj(go.LayeredDigraphLayout, {
direction: 0,
//aggressiveOption: go.LayeredDigraphLayout.AggressiveLess,
//cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
//initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
iterations: 50,
layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
packOption: go.LayeredDigraphLayout.PackStraighten,
columnSpacing: 5,
layerSpacing: 155,
setsPortSpots: false,
//isRouting :true
}),
If you really want parallel routes between two nodes, I think you want to set
{
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide
}
Either on your Node template’s port or on your Link template.
HI Walter,Thank you for reply,
Its breaks the self connected link. also not appears as in image. Do you have any example to achieve as in the image.
Could you please explain the problem?
Yes, I want layout using the layered digraph where i can have link like uni direction, bi direction as well as self connected links. Below is my link array.
Problem , not able to form parallel links as in the image using Layereddigraphlayout
[{
"from": 1,
"to": 2,
},
{
"from": 2,
"to": 1,
},
{
"from": 7,
"to": 7,
},
{
"from": 6,
"to": 6,
},
{
"from": 6,
"to": 7,
},
{
"from": 7,
"to": 6,
},
{
"from": 0,
"to": 1,
}, {
"from": 0,
"to": 6,
}, {
"from": 2,
"to": 3,
}, {
"from": 7,
"to": 3,
},
{
"from": 2,
"to": 4,
},
{
"from": 2,
"to": 8,
},
{
"from": 2,
"to": 5,
}
]
Could you please explain the problem more precisely? Show what you are getting and point out exactly how that does not match your expectations.
Thank you Walter for reply,
Basically i want to add parallel lines using LayeredDigraphLayout.
Below is my layout config:
$(go.LayeredDigraphLayout, {
direction: 0,
aggressiveOption: go.LayeredDigraphLayout.AggressiveLess,
cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
initializeOption: go.LayeredDigraphLayout.InitDepthFirstIn,
iterations: 50,
layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
packOption: go.LayeredDigraphLayout.PackStraighten,
columnSpacing: 5,
layerSpacing: 155,
setsPortSpots: false
});
Thank you, but you already showed your layout declaration. I’m asking for more details of the actual routing that you are getting that you do not want. Show us the results and mark up what you want instead.
HI Walter Thank you,
Sorry my English is bad:) Please check the image below. Below is my output what i’m getting. i want parallel line like black color links. i didn’t use any routing in the linkTemplate.
OK, but you have already shown us that screenshot. I’m asking what results are you getting after having set fromSpot to go.Spot.RightSide and toSpot to go.Spot.LeftSide? And how do those results differ from what you want?
HI Walter, i have applied the configuration. Below is my output
Please give any sample with parallel line using layered digraph layout.
$(go.Node, "Vertical", {
locationSpot: go.Spot.Center,
fromSpot: go.Spot.RightSide,
toSpot: go.Spot.LeftSide},Well, technically those links are parallel to each other. You do not say, so I will assume, that you do not want that green link to start going out the right side of the right node, looping all the way around both nodes, and then coming into the left side of the left node.
Try setting fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides.
Thank you Walter, Yes your assumption is correct. I have applied the setting but links overlaps each other as in the image.
I’ll create a sample for you, this afternoon.
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.LayeredDigraphLayout, { setsPortSpots: false })
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white", portId: "", fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 3 },
{ from: 3, to: 1 },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 2, to: 4 }
]);
}
produces:
Good Morning Walter,
Really Nice and this is my expectation. i have applied the configuration fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides it is working now. Yesterday i have applied the same but it doesn’t :( works. Anyhow you save my day:)
Another small suggestion how to reduce gap between fromSpot and toSpot
You could make the port shorter (less tall).
Thank you Walter, But i don’t see such property GoJS Ports in Nodes-- Northwoods Software .Can you please suggest me on this.