No Links Shown

@cobolstinks wrote:

Hi I'm trying to recreate the sequence diagram here: http://gojs.net/latest/samples/sequentialFunction.html

But no links are being shown and the objects are just rendered in a horizontal line.

Here is my code:
var myDiagram =
$(go.Diagram, "myDiagramDiv", // must be the ID or reference to an HTML DIV
{
// start everything in the middle of the viewport
initialContentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout, { direction: 90, layerSpacing: 10, setsPortSpots: false }),
"undoManager.isEnabled": true // enable undo & redo
});

// define the step Node template
myDiagram.nodeTemplateMap.add("step",
    $(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "Rectangle",
            {
                fill: "whitesmoke",
                stroke: "gray",
                strokeWidth: 2,
                desiredSize: new go.Size(160, 60),
                portId: "",  // so that links connect to the Shape, not to the whole Node
                fromSpot: go.Spot.BottomSide,
                toSpot: go.Spot.TopSide,
                alignment: go.Spot.Center
            }),
        $(go.TextBlock,
            {
                font: "bold 16px sans-serif",
                alignment: go.Spot.Center,
                wrap: go.TextBlock.WrapFit,
                editable: true
            },
            new go.Binding("text", "text").makeTwoWay())
    ));
// define the transition Node template.
myDiagram.nodeTemplateMap.add("transition",
    $(go.Node, "Horizontal",
        { locationSpot: go.Spot.Center, locationObjectName: "BAR" },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "Rectangle",
            {
                name: "BAR",
                fill: "black",
                stroke: null,
                desiredSize: new go.Size(60, 8),
                portId: "",
                fromSpot: go.Spot.BottomSide,
                toSpot: go.Spot.TopSide
            }),
        $(go.TextBlock,
            { editable: true, margin: 3 },
            new go.Binding("text", "text").makeTwoWay())
    ));
// define the parallel Node template.
myDiagram.nodeTemplateMap.add("parallel",
    $(go.Node,
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "Rectangle",
            {
                fill: "whitesmoke",
                stroke: "black",
                fromSpot: go.Spot.BottomCenter,
                toSpot: go.Spot.TopCenter,
                desiredSize: new go.Size(200, 6),
                portId: ""
            })
    ));
// define the Link template
myDiagram.linkTemplate =
    $(go.Link,
        { routing: go.Link.Orthogonal },
        $(go.Shape,
            { stroke: "black", strokeWidth: 2 })
    );


var model = $(go.Model);

model.nodeDataArray =
[

    { key: "S1", category: "step", text: "Step 0" },
    { key: "TR1", category: "transition", text: "Transition 1" },
    { key: "S2", category: "step", text: "Step 2" },
    { key: "TR2",category: "transition", text: "Transition 2" },
    { key: "BAR1", category: "parallel" },
    { key: "S3", category: "step", text: "Step 3" },
    { key: "S4", category: "step", text: "Step 4" },
    { key: "BAR2", category: "parallel" },
    { key: "TR3", category: "transition", text: "Transition 3" },
    { key: "S5", category: "step", text: "Step 5" }

    ];

model.linkDataArray = [

    { from: "S1", to: "TR1" },
    { from: "TR1", to: "S2" },
    { from: "S2", to: "TR2" },
    { from: "TR2", to: "BAR1" },
    { from: "BAR1", to: "S3" },
    { from: "BAR1", to: "S4" },
    { from: "S3", to: "BAR2" },
    { from: "S4", to: "BAR2" },
    { from: "BAR2", to: "TR3" },
    { from: "TR3", to: "S5" }
]
myDiagram.model = model;

What am i doing wrong?

Thanks,
Chris

nolinks.png1465x305 2.5 KB

Posts: 3

Participants: 2

Read full topic