Search code examples
javascriptdiagramgojs

Uncaught Error: Undefined value at argument 2 for object being constructed by GraphObject.make: Link#446


I`m constructing a diagram in go.js and I want to change the link color depending on some variable called type. For that purpose, I constructed a function called makeLinkColor in which I return the desired color depending on this type value.

This is the function:

function makeLinkColor(propName) {
        if (propName == "1") {
             color = "red"
             return $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 9 },
             new go.Binding("stroke", color));
        }
        else{
             color = "grey"
             return $(go.Shape, { isPanelMain: true, stroke: "blue", strokeWidth: 9 },
             new go.Binding("stroke", color));
        }

    }

And here my diagramLinkTemplate and the linkDataArray:

myDiagram.linkTemplate =
        $(go.Link,
            { routing: go.Link.AvoidsNodes, corner: 12 },
            makeLinkColor("type"),
        $(go.Panel, "Auto",  // this whole Panel is a link label
            $(go.Shape, "Rectangle", { fill: "green", stroke: "green" }),
            $(go.TextBlock, { margin: 3 , stroke: "white"},
            new go.Binding("text", "text"))
        )
    );

myDiagram.model.linkDataArray = 
       [
            { from: 1, to: 2, color: "white", text:"123421", type:"1" },
            { from: 1, to: 3, color: "red", text:"49324", type:"1" },
            { from: 3, to: 4, color: "white", text:"876543", type:"2" },
            { from: 4, to: 5, color: "white", text:"81648713", type:"1" },
            { from: 4, to: 1, color: "white", text:"21353", type:"3" },
            { from: 2, to: 3, color: "white", text:"4135235", type:"1" },
       ];


I have something similar with the nodes and it's working properly, but when I try this with the links I get this error:

Uncaught Error: Undefined value at argument 2 for object being constructed by GraphObject.make: Link#446

Hope someone can help me!


Solution

  • You can just use a binding on "type" instead:

    myDiagram.linkTemplate =
            $(go.Link,
                { routing: go.Link.AvoidsNodes, corner: 12 },
            $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 9 },
                 new go.Binding("stroke", "type", function(type) {
                     return type === "1" ? "red" : "gray";
                 })),
            $(go.Panel, "Auto",  // this whole Panel is a link label
                $(go.Shape, "Rectangle", { fill: "green", stroke: "green" }),
                $(go.TextBlock, { margin: 3 , stroke: "white"},
                new go.Binding("text", "text"))
            )
        );