# Links

Other than the parent-child connectors, we can add additional Links i.e., additional connectors for the nodes.

To plot the Links, we need the following information:

1\.      Destination node – Id of the destination node

And optional styling details:

2\.      Arrow direction – Acceptable values are ‘Start’, ‘End’ and ‘Both’

3\.      Style of the line – Acceptable values are ‘Solid’, ‘Dashed’ or ‘Dotted’

4\.      Color of the line – Hex color codes are accepted

Example:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FyrqUesSe77sghPCzqP7C%2Fimage.png?alt=media&#x26;token=eb4b42cf-b8af-4737-8e80-61849462b1f5" alt=""><figcaption></figcaption></figure>

Links can be plotted using any of these methods:

### **1.      Data-driven Links**

Provide the data for the links from the data source.

Add the columns in the ‘Fields’ data field and use ‘Map Fields’ to map the columns:<br>

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FWmM1ayw6vkdA4qOtpygB%2Fimage.png?alt=media&#x26;token=e154b3dc-e670-4b87-93c6-aaa8eaaf86ee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fclwpv37fm9yJ8Cjys9Rc%2Fimage.png?alt=media&#x26;token=bcfadc27-d7c6-4920-af1e-6ff66f55d8cc" alt=""><figcaption></figcaption></figure>

The links are now plotted in the visual:<br>

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FIRLlbklkKRtIH8fF9AgQ%2Fimage.png?alt=media&#x26;token=b5b47ea8-1955-4308-9edf-d331d96d9a8b" alt=""><figcaption></figcaption></figure>

&#x20;

### **2.      Custom Links**

We can draw the connectors within the visual canvas using one of the two mechanisms:

1\.      By selecting the source and destination nodes on the canvas:

On the top ribbon -> Links section menu -> Select ‘Add Link’<br>

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fdeaq4Lj7XWsA37zmSKic%2Fimage.png?alt=media&#x26;token=5754ff0a-b8c5-4783-93c0-2718abc98aae" alt=""><figcaption></figcaption></figure>

&#x20;The visual will prompt you to click on the source and then destination nodes. Upon selection, the custom link will be plotted.

&#x20;2\.      By selecting the source and destination nodes using Node Selector:\
On the top ribbon -> Links section menu -> Select ‘Manage Links’

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F1ssf58Pqpmsc9uOMOQV4%2Fimage.png?alt=media&#x26;token=ad67390f-4584-4380-9cd6-0bad7f56a54c" alt=""><figcaption></figcaption></figure>

In the ‘Manage Custom Links’ menu, click on ‘Add New’:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FkV0n5REW1eKZmGMbxmuI%2Fimage.png?alt=media&#x26;token=b9d0bdab-ef2b-4db6-8da6-cd248b7b6051" alt=""><figcaption></figcaption></figure>

Click on ‘Select Node’ for Source and then Destination. A Node Selector will open where we can search for the required node and select it:<br>

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FAliywULaYqYATSQcKWfz%2Fimage.png?alt=media&#x26;token=861e860c-9874-45c4-8376-1c1d8b29631e" alt=""><figcaption></figcaption></figure>

We can adjust the formatting for individual links using the ‘Manage Links’ or by clicking on any Link and using the floating menu:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FUuNwwsvqR8V3lV28bNIx%2Fimage.png?alt=media&#x26;token=12a77b30-a32d-4d92-b1f2-a54b94e8c964" alt=""><figcaption></figcaption></figure>

For every kind of link (based on the line style and color), a representation will be added to the Legend. The label for each representation can be set using the ‘Edit’ icon next to the Legend:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FqKfaOKYUP6BwfpNyRRw4%2Fimage.png?alt=media&#x26;token=4d821dd9-e86f-4379-b36f-5be64e751074" alt=""><figcaption></figcaption></figure>

### 3. Advanced Links

The **Advanced Link** feature provides greater flexibility in visualizing relationships between nodes by improving link positioning and avoiding clutter.

{% hint style="warning" %}
Applicable only for straight links and not curved links
{% endhint %}

1. Option is available in **Font & Color** section in the **Links** settings<br>

   <figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F3QcU4F3o8N95mivnxtKH%2F0.png?alt=media" alt=""><figcaption></figcaption></figure>
2. When the **Advanced Link** option is enabled, the direction of links automatically adjusts from **side-to-side**.<br>

   <figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FrSV8wqqythynaX4IBhuB%2F1.gif?alt=media" alt="" width="563"><figcaption></figcaption></figure>
3. Link Overlapping:
   * In scenarios where **Group Nodes** are connected to multiple other nodes, links may overlap, enabling the **Advanced Link** feature reroutes the links, ensuring they are visually distinct and do not overlap unnecessarily.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FUSuMjLlKATi5mKc37KCn%2F2.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>
