Change a Solid Link to a dashed one after rendering diagram

GoJS
#1

This logic for finding the link to the node may be a bit ridiculous but bear with me

this.myDiagram.linkTemplate = this.$(
    go.Link, {
        routing: go.Link.Normal,
        curve: go.Link.Bezier,
        selectionAdorned: true,
        layerName: 'red'
    },
    this.$(go.Shape, {
        stroke: 'black',  // default value, but is data-bound
        strokeWidth: 1
    }, new go.Binding('strokeDashArray', 'dash'))
);

I wish to show only a certain Link between the Root Node and a desired Node as a dashed link. The above mentioned code will look for dash parameter in the linkDataArray.

I render the diagram:

let recApproach = new RecClass();
    recApproach.generateGraphRecApproach(this.config, this.myDiagram, this.$, lay);

The way to find the node is below:

this.myDiagram.nodes.each(g => { // iterate over the nodes
        if (g.data.text === pNode) { // find the desired parent node
            console.log(g.data.key); // try to get the key suppose 41
            for (let eachLink of this.myDiagram.model.linkDataArray) { // in the linkDataArray find the link
                if (eachLink['to'] === g.data.key) { // the link from Root to desiredNode
                    console.log(eachLink);  // {from: 1, to: 41}
                    let index = this.myDiagram.model.linkDataArray.indexOf(eachLink); // find index in array
                    this.myDiagram.model.linkDataArray.splice(index, 1); // remove it
                    eachLink['dash'] = [4, 4]; // add dash key value parameter
                    console.log(eachLink); // {from: 1, to: 41, dash: [4,4]}
                    this.myDiagram.model.linkDataArray.splice(index, 0, eachLink); // push it back in at same place
                }
            }
        }
    });

So the Link between Root Node (1) and the desired node (41) needs to be dashed. At this point in the code I have already rendered the diagram before the above iteration.

However I do not seem to be getting the dash to be rendered between the nodes.

I also tried adding

this.myDiagram.model = new go.GraphLinksModel(this.myDiagram.model.nodeDataArray,this.myDiagram.model.nodeDataArray );

after the iteration but it doesn’t get rendered. It gives an Exception stating:

RadialLayout.root must be a Node in the LayoutNetwork that the RadialLayout is operating on

Is there:

  1. a better way to obtain the link from the root to the desiredNode ?
  2. Can I change the way the link looks after it has already been rendered like the way mentioned above?

For Context:

The highlighted link {from: 1, to: 41} needs to be dashed.

nodeDataArray for each node:

 {key: 1, text: 'SomeName', color: 'red or green'}
#2

First, I think you want to find the “root” node

var root = myDiagram.findNodeForKey(1);

Second, you want to find the link(s) from that root Node to a particular Node and change the path’s Shape.strokeDashArray:

root.findLinksOutOf().each(link => {
    if (link.toNode.data.text === pNodeText) {
        link.path.strokeDashArray = [4, 4];
    }
  });

Now what I just did does not modify the model, but if you make the Binding a TwoWay Binding, then it will automatically update the corresponding link data property, linkdata.dash.

If you want to modify the model data directly rather than have a TwoWay Binding, you’ll need to call Model.setDataProperty, so that GoJS becomes aware that some property on some data object was changed.

1 Like