Radial Tree Diagram - Setting Connector Labels at Runtime

[Cullen Chow]

Hi,

I'm trying to potentially set the label for some, but not necessarily all of the connectors between nodes for the radial tree diagram. Can this be done dynamically when databinding to dataSourceSettings? I'm currently databinding dynamically something like this:

this.dataSource = {
                id: 'id', parentId: 'parentId',
                dataSource: new DataManager(this.radialTreeData),               
                doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
                    this.diagramUtility.BindDataToRadialTreeNode(nodeModel, data, diagram);
                }

               // Ideally want to change the connector label here, when setting the dataSource property, or in the doBinding function since the diagram data can change 

               // dynamically at run time

            };

if (this.diagram) {
            this.diagram.reset();
            this.diagram.fitToPage();
            this.diagram.dataBind();
        }

The labels I need for the connectors would be in this.radialTreeData that I use in the DataManager constructor. Thanks for your time in advance!

[Aravind Ravi]

Hi Cullen, 

 

By default, in the diagram, we can able to bind the JSON data object to the node using the doBinding feature.  We do not have support to bind the JSON to the connector using doBinding. However, by using the created event we can able to create labels for connector. After layout gets arranged, diagram created event gets triggered. In the created event get all the connectors arranged in layout and add labels for the connector using the addLabels public API method. Please refer below code snippet and sample below 

 

public create(args: Object): void { 

      for (let i: number = 0 ; i < this.diagram.connectors.length ; i++) { 

        let connector: ConnectorModel = this.diagram.connectors[i]; 

        let sourceNode: NodeModel = this.diagram.getObject(connector.sourceID); 

        let targetNode: NodeModel = this.diagram.getObject(connector.targetID); 

        let annotations: PathAnnotationModel[] = [{ 

          content: (sourceNode.data as any).Name + '->' + (targetNode.data as any).Name 

        }]; 

        this.diagram.addLabels(connector, annotations); 

      } 

        this.diagram.fitToPage(); 

        this.diagram.dataBind(); 

    } 

 

Sample: https://stackblitz.com/edit/angular-a2cv3x-a8uv3b 

 

In the above sample we have added the connector labels to show the relationship from parent to child. 

 

Regards 

Aravind Ravi 

[Cullen Chow]

Aravind,

This will work great, thanks! I was able to add the labels, and add a hover text to that ConnectorModel using similar code used in the doBinding function for the NodeModel. Have a nice weekend!

Cullen

[Aravind Ravi]

Hi Cullen, 

 

Thanks for the update. 

 

Regards 

Aravind Ravi