GO JS Link is not visible

GoJS
1

Iam trying to build GO J Diagram but links are not rendered.

code :
var $ = go.GraphObject.make; // We use $ for conciseness, but you can use anything, $, GO, MAKE, etc
var myDiagram = $(go.Diagram, “myDiagramDiv”, // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
“undoManager.isEnabled”: true
});

    myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding('location'),
    $(go.Shape, "Rectangle",
      { fill: 'white' },
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color"),
      // this binding changes the Shape.fill when Node.isHighlighted changes value
      new go.Binding("fill", "isHighlighted", function(h, shape) {
        if (h) return "red";
        var c = shape.part.data.color;
        return c ? c : "white";
      }).ofObject()),  // binding source is Node.isHighlighted
    $(go.TextBlock,
      { margin: 3, font: "bold 16px sans-serif", width: 140, textAlign: 'center' },
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text"))
  );
// but use the default Link template, by not setting Diagram.linkTemplate
// create the model data that will be represented by Nodes and Links
myDiagram.linkTemplate =
$(go.Link,
  $(go.Shape),  // the link shape
  $(go.Shape)   // the arrowhead
    
);
myDiagram.layout = $(go.TreeLayout);
var nodeDataArray = [
{ text: "Alpha", color: "lightblue" },
  { text: "Beta", color: "orange" },
  { text: "Gamma", color: "lightgreen" },
  { text: "Delta", color: "pink" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);
myDiagram.model.undoManager.isEnabled = true;

}

2

The “to” and “from” values in the link data need to be the keys of the nodes that you want to link. If you look at the node data in the debugger, you will see that they have “key” values automatically assigned, but you neither pre-assigned the keys in the node data nor did you use those key values in your link data.

You could do the former by:

    var nodeDataArray = [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" }
    ];
    var linkDataArray = [
      { from: 1, to: 2 }
    ];

Another possibility is to declare that the node keys are held by the “text” property instead of the “key” property as is the default property name.

    var nodeDataArray = [
      { text: "Alpha", color: "lightblue" },
      { text: "Beta", color: "orange" }
    ];
    var linkDataArray = [
      { from: "Alpha", to: "Beta" }
    ];
    myDiagram.model = $(go.GraphLinksModel,
      {
        nodeKeyProperty: "text",
        nodeDataArray: nodeDataArray,
        linkDataArray: linkDataArray
      });

On an unrelated issue, I notice that you have two Shapes in your Link template. The first one, by default, is used as the Link path – that’s fine. But the second one cannot act as an arrowhead unless you set some properties on it – typically at least setting Shape.toArrow. If you don’t set it, GoJS will treat the Shape as if it were a label on the link path. And since you haven’t set any other properties on the Shape, it defaults to a 100x100 black square. That’s probably not what you want.

3

thanks for your help.
Now it works fine.