I am trying out layouts provided by gojs, and stuck at how to improve the representation.
Here is my gojs model if you want the data
{ “class”: “go.GraphLinksModel”,
“nodeKeyProperty”: “id”,
“nodeDataArray”: [
{“id”:“node1”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“0 333.11674804687505”},
{“id”:“node2”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“Copy.Id <> null”, “loc”:“200 333.11674804687505”},
{“id”:“node3”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“Copy.Id <> null”, “loc”:“400 333.11674804687505”},
{“id”:“node4”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“600 333.116748046875”},
{“id”:“node5”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“800 0”},
{“id”:“node6”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“800 222.07783203125”},
{“id”:“node7”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“800 444.1556640625”},
{“id”:“node8”, “type”:“Native”, “imgPath”:“icons/native.png”, “predicate”:“”, “loc”:“800 666.23349609375”},
{“id”:“JoinNode1”, “type”:“Join”, “imgPath”:“icons/join.png”, “predicate”:“”, “loc”:“1000 0”},
{“id”:“JoinNode2”, “type”:“Join”, “imgPath”:“icons/join.png”, “predicate”:“”, “loc”:“1000 222.07783203125”},
{“id”:“JoinNode3”, “type”:“Join”, “imgPath”:“icons/join.png”, “predicate”:“”, “loc”:“1000 444.1556640625”},
{“id”:“JoinNode4”, “type”:“Join”, “imgPath”:“icons/join.png”, “predicate”:“”, “loc”:“1000 666.23349609375”},
{“id”:“JoinOutput1”, “type”:“Table”, “imgPath”:“icons/table.png”, “predicate”:“”, “loc”:“1220.15625 0”},
{“id”:“JoinOutput2”, “type”:“Table”, “imgPath”:“icons/table.png”, “predicate”:“”, “loc”:“1220.15625 222.07783203125”},
{“id”:“JoinOutput3”, “type”:“Table”, “imgPath”:“icons/table.png”, “predicate”:“”, “loc”:“1220.15625 444.1556640625”},
{“id”:“JoinOutput4”, “type”:“Table”, “imgPath”:“icons/table.png”, “predicate”:“”, “loc”:“1220.15625 666.23349609375”}
],
“linkDataArray”: [
{“from”:“node1”, “to”:“node2”, “label”:“relation1”, “type”:“Native”, “imgPath”:“icons/nativeRelation.png”, “points”:[50,358.11674804687505,60,358.11674804687505,125,358.11674804687505,125,358.11674804687505,190,358.11674804687505,200,358.11674804687505]},
{“from”:“node2”, “to”:“node3”, “label”:“relation2”, “type”:“Native”, “imgPath”:“icons/nativeRelation.png”, “points”:[250,358.11674804687505,260,358.11674804687505,325,358.11674804687505,325,358.11674804687505,390,358.11674804687505,400,358.11674804687505]},
{“from”:“node3”, “to”:“node4”, “label”:“relation3”, “type”:“Native”, “imgPath”:“icons/nativeRelation.png”, “points”:[450,358.11674804687505,460,358.11674804687505,525,358.11674804687505,525,358.116748046875,590,358.116748046875,600,358.116748046875]},
{“from”:“node4”, “to”:“node5”, “label”:“relation4”, “type”:“Native”, “imgPath”:“icons/nativeRelation.png”, “points”:[650,358.116748046875,660,358.116748046875,725,358.116748046875,725,25,790,25,800,25]},
{“from”:“node4”, “to”:“node6”, “label”:“relation5”, “type”:“Semantic”, “imgPath”:“icons/semanticRelation.png”, “points”:[650,358.116748046875,660,358.116748046875,725,358.116748046875,725,247.07783203125,790,247.07783203125,800,247.07783203125]},
{“from”:“node4”, “to”:“node7”, “label”:“relation6”, “type”:“Semantic”, “imgPath”:“icons/semanticRelation.png”, “points”:[650,358.116748046875,660,358.116748046875,725,358.116748046875,725,469.1556640625,790,469.1556640625,800,469.1556640625]},
{“from”:“node4”, “to”:“node8”, “label”:“relation7”, “type”:“Native”, “imgPath”:“icons/nativeRelation.png”, “points”:[650,358.116748046875,660,358.116748046875,725,358.116748046875,725,691.23349609375,790,691.23349609375,800,691.23349609375]},
{“from”:“node4”, “to”:“JoinNode1”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[650,358.116748046875,660,358.116748046875,830.0390625,358.116748046875,830.0390625,25,1000.078125,25,1010.078125,25]},
{“from”:“node5”, “to”:“JoinNode1”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[850,25,860,25,930.0390625,25,930.0390625,25,1000.078125,25,1010.078125,25]},
{“from”:“node4”, “to”:“JoinNode2”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[650,358.116748046875,660,358.116748046875,830.0390625,358.116748046875,830.0390625,247.07783203125,1000.078125,247.07783203125,1010.078125,247.07783203125]},
{“from”:“node6”, “to”:“JoinNode2”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[850,247.07783203125,860,247.07783203125,930.0390625,247.07783203125,930.0390625,247.07783203125,1000.078125,247.07783203125,1010.078125,247.07783203125]},
{“from”:“node4”, “to”:“JoinNode3”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[650,358.116748046875,660,358.116748046875,830.0390625,358.116748046875,830.0390625,469.1556640625,1000.078125,469.1556640625,1010.078125,469.1556640625]},
{“from”:“node7”, “to”:“JoinNode3”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[850,469.1556640625,860,469.1556640625,930.0390625,469.1556640625,930.0390625,469.1556640625,1000.078125,469.1556640625,1010.078125,469.1556640625]},
{“from”:“node4”, “to”:“JoinNode4”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[650,358.116748046875,660,358.116748046875,830.0390625,358.116748046875,830.0390625,691.23349609375,1000.078125,691.23349609375,1010.078125,691.23349609375]},
{“from”:“node8”, “to”:“JoinNode4”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[850,691.23349609375,860,691.23349609375,930.0390625,691.23349609375,930.0390625,691.23349609375,1000.078125,691.23349609375,1010.078125,691.23349609375]},
{“from”:“JoinNode1”, “to”:“JoinOutput1”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[1060.078125,25,1070.078125,25,1147.14306640625,25,1147.14306640625,25,1224.2080078125,25,1234.2080078125,25]},
{“from”:“JoinNode2”, “to”:“JoinOutput2”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[1060.078125,247.07783203125,1070.078125,247.07783203125,1147.14306640625,247.07783203125,1147.14306640625,247.07783203125,1224.2080078125,247.07783203125,1234.2080078125,247.07783203125]},
{“from”:“JoinNode3”, “to”:“JoinOutput3”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[1060.078125,469.1556640625,1070.078125,469.1556640625,1147.14306640625,469.1556640625,1147.14306640625,469.1556640625,1224.2080078125,469.1556640625,1234.2080078125,469.1556640625]},
{“from”:“JoinNode4”, “to”:“JoinOutput4”, “label”:“”, “type”:“Normal”, “imgPath”:“”, “points”:[1060.078125,691.23349609375,1070.078125,691.23349609375,1147.14306640625,691.23349609375,1147.14306640625,691.23349609375,1224.2080078125,691.23349609375,1234.2080078125,691.23349609375]}
]}
Link template
$$(
go.Link,
{
cursor : 'pointer',
routing : go.Link.Orthogonal,
corner : 10
},// basic link styles
new go.Binding( 'points' ).makeTwoWay(),
$$( go.Shape, { stroke : '#b5b5b5', 'strokeDashArray' : [ 3, 2 ] } ), // this shape is link
$$( go.Shape, { fill : '#a5a5a5', stroke : '#a5a5a5', toArrow : 'Triangle' } ), // the "to" end arrowhead
$$( go.Panel, 'Vertical', // this Panel is link label
$$( go.Picture, { width : 30, height : 40 },
new go.Binding( 'source', 'imgPath' )
),
$$( go.TextBlock, { margin : 3 },
new go.Binding( 'text', 'label' )
)
)
);
Here is where I have a problem.
I am applying treeLayout using
layout = $$( go.TreeLayout, {
isInitial : true,
angle : 0,
nodeSpacing : 200,
layerSpacing : 200
} );
goDiagram.startTransaction( ‘_toggleLayout’ );
goDiagram.layout = layout;
goDiagram.commitTransaction( ‘_toggleLayout’ );
Which renders my layout as following image
Now please find relation5 in image, it is not clearly visible that it is related to node6. Same goes with other relations. The other issue is JoinNode[ 1-4 ] and node4 are linked to each other, but this information is hard to gather by looking at the graph.
How can I improve the representation ? I tried the fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
but once I apply the layout this property is ignored.
The other layout that I tried was LayeredDigraphLayout. I applied the layout using
layout = layout = $$( go.LayeredDigraphLayout, {
angle : 0,
layerSpacing: 100,
columnSpacing: 50
} );
goDiagram.startTransaction( ‘_toggleLayout’ );
goDiagram.layout = layout;
goDiagram.commitTransaction( ‘_toggleLayout’ );
Which renders my layout as following image
In this layout the JoinNode[ 1-4 ] and node4 are linked to each other is some what visible. But there is too much cluttering between node4 and node[5-8] colummn.
So my question is, is there a setting to make my layout a bit clutter free with all information more clear than what is visible now ?