Connect a new subtree/subgraph on existing link

GoJS
1

Hi,

I am using GoJS v1.4.8 for tree/graph creation.
I need to add a new subtree/subgraph on some existing link that is connecting two nodes. I was unable to find a solution for this scenario.
I need that the new subtree/subgraph added should be available in the JSON as well in the relation with that link.

Any help appreciated.

Thanks

2

What do you mean by “I need to add a new subtree/subgraph on some existing link that is connecting two nodes”? Could you show us with a sketch or screenshot?

All structural graph changes will be reflected in the Model. You may want to add your own properties to the data in the model. Calling Model.toJson(), as so many of the samples do, will get you your JSON-formatted text.

3

Hi Walter,

PFA image that can explain my requirements.
I want to achieve the mentioned functionlity using GoJS.

Thanks.

4

[code] function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, “myDiagram”,
{ initialContentAlignment: go.Spot.Center });
myDiagram.nodeTemplateMap.add("",
$(go.Node, “Auto”,
{ toSpot: go.Spot.LeftRightSides, fromSpot: go.Spot.Left, locationSpot: go.Spot.Center },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, { fill: “white”, strokeWidth: 3 }),
$(go.TextBlock,
{ margin: 5 },
new go.Binding(“text”))
));
myDiagram.nodeTemplateMap.add(“subtree”,
$(go.Node,
{ toSpot: go.Spot.TopBottomSides, locationSpot: go.Spot.Center },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.TextBlock,
{ margin: 5 },
new go.Binding(“text”))
));

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 20 },
    $(go.Shape, { strokeWidth: 3 })
  );

myDiagram.model = new go.GraphLinksModel([
  { key: 1, text: "Node 1", loc: "200 100" },
  { key: 2, text: "Node 2", loc: "0 100" },
  { key: 3, category: "subtree", text: "New subtree A", loc: "100 0" },
  { key: 4, category: "subtree", text: "New subtree B", loc: "50 200" }
], [
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 1, to: 4 }
]);

}[/code]
results in:

5

Hi Walter,

Thanks for the reply.
I wanted to connect subtree with a link, but in your design, it is connected with node and appears to be connected with a link.
However, I achieved this functionality by introducing a new node in between both the nodes and then connecting the subtree with new node.
If I find some issue then will again reach you.

Thanks & Regards,
Ankit

6

Hi Walter,

In this example you drew, it doesn’t follow any layout structure. I need to follow the ‘LayeredDigraphLayout’. Can you please help me to figure out the way to do this within the layout.

Any help is appreciated.

Thanks & Regards,
Ankit

7

And also, ‘New Subtree A’ and ‘New Subtree B’ need to be connected with ‘Node 2’ but there appearance should still be the same as already appearing in your approach.

8

Generally one wants to set Diagram.layout to an instance of some kind of Layout. http://gojs.net/latest/intro/layouts.html
However, since I am guessing that you want to have a tree extending upwards and another one extending downwards, perhaps you want to do something like http://gojs.net/latest/samples/doubleTree.html, except up and down instead of left and right.

But then I also wonder if you really want something like TreeLayout with alignment = go.TreeLayout.AlignmentBusBranching, or perhaps a modified Fishbone layout. Both are demonstrated by http://gojs.net/latest/extensions/Fishbone.html.

9

My requirement is still the same as the previously attached screenshot.
Previously, I had not used any layout, but in new requirement, I need to follow the ‘LayeredDigraphLayout’.
I want to add a link in the attached design within ‘LayeredDigraphLayout’.

10

Since you mention subtrees, I don’t see how LayeredDigraphLayout would help.

Could you provide a more complete screenshot or sketch of what you want? Apparently just having four nodes is not enough to convey what you want to achieve.

12

?