Quantcast
Channel: GoJS - Northwoods Software
Viewing all articles
Browse latest Browse all 7069

Change a Solid Link to a dashed one after rendering diagram

$
0
0

@shantanoo-desai wrote:

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'}

Posts: 2

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 7069

Trending Articles