I am using LayeredDigraphLayout for building my graph
with linkDataArray count 1274 and nodeDataArray count 227 it’s taking too much time to load, please let me know any other way to load the data as per my requirement the data of link and node data will be increate up to 2000 links and 1000 nodes
$(go.Diagram, "myDiagramDiv", {
initialAutoScale: go.Diagram.UniformToFill,
hasVerticalScrollbar :false,
hasHorizontalScrollbar :false,
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 30,
columnSpacing: 30,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
isOngoing: false,
setsPortSpots: false
}),
});
myDiagram.toolManager.dragSelectingTool.isEnabled = false;
nodeTemplate
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationSpot: go.Spot.Top,
isShadowed: true, shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)",
locationObjectName: "BODY"
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{
name: "SHAPE", fill: "#ffffff", strokeWidth: 2,
stroke: null,
cursor: "pointer",
}),
$(go.TextBlock,
{
font: "bold small-caps 11pt helvetica, bold arial, sans-serif",
stroke: "rgba(0, 0, 0, .87)",
margin: new go.Margin(3, 3 + 11, 3, 13 + 4), alignment: go.Spot.Right
},
new go.Binding("text").makeTwoWay())
),
// output port
$(go.Panel, "Auto",
{ alignment: go.Spot.Left },
$(go.Shape, "Circle",
{ name: "nodeCircle", width: 25, height: 25, fill: "white", stroke: "dodgerblue", strokeWidth: 3 }),
$(go.TextBlock,
{ font: "small-caps 10pt helvetica, bold arial, sans-serif", margin: 7, stroke: "rgba(0, 0, 0, .87)", },
new go.Binding("text", "nodeWeight").makeTwoWay())
)
);
linkTemplate
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
curve: go.Link.Bezier,
adjusting: go.Link.Stretch,
},
$(go.Shape, // the link shape
//{ isPanelMain: true, stroke: "transparent" },
// new go.Binding("stroke", "patt", function (f) { return (f === "") ? "black" : "transparent"; }),
// new go.Binding("pathPattern", "linkInfo", convertPathPatternToShape),
new go.Binding("stroke", "isHighlighted", function (h) {
return h ? "red" : "lightblue";//transparent
}).ofObject(),
new go.Binding('stroke', 'lightblue').ofObject(),
// new go.Binding('strokeWidth', 'linkInfo', function (linkData) {
// return linkData.linkWeight;
// }),
),
$(go.Shape, // the arrowhead
{
toArrow: 'Standard',
fill: 'black',
stroke: 'black'
},
new go.Binding('strokeWidth', 'linkInfo', function (linkData) {
return linkData.linkWeight;
}),
),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial",
{ 0: "rgb(245, 245, 245)", 0.7: "rgb(245, 245, 245)", 1: "rgba(245, 245, 245, 0)" }),
stroke: null
}),
$(go.TextBlock, "transition", // the label text
{
textAlign: "center",
font: "9pt helvetica, arial, sans-serif",
margin: 4,
},
new go.Binding("text").makeTwoWay())
)
);