Link Data ​

The original link properties are only required by d3 to calculate the respective forces that are applied to the nodes. Graphly D3 extends this data structure with properties to further describe appearance and force behavior of any link.

const link = {
	id: "link1",
	source: "node1",
	target: "node2",
	type: "solid",
	directed: true,
	label: "links to",
	strength: "strong",
	padding: 10,
	width: 3,
	curvature: 0.1,
	color: "#a6a6a6",
	payload: {
		// put your custom data here
	},
};

Interface ​

interface Link {
	id?: string;
	source: string | Node;
	target: string | Node;
	type?: LinkType;
	directed?: boolean;
	label?: string;
	strength?: number | LinkStrength;
	padding?: number;
	width?: number;
	curvature?: number;
	color?: string;
	payload?: any;
}

Id ​

The id property is optional but recommended. It is used to identify the link in the graph and it can be used to easily search for a link in custom processing steps.

const link = {
	id: "link1",
	source: "node1",
	target: "node2",
};

Source & Target ​

The source and target properties are strings containing the id of the respective node this link connects.

const link = {
	source: "node1",
	target: "node2",
};

Type ​

The link type property defines the appearance of the link. It takes a string value and can be one of the following:

enum LinkType {
	Solid = "solid",
	Dashed = "dashed",
	Dotted = "dotted",
	Hidden = "hidden",
}

• solid: A solid path with rounded ends.
• dashed: A dashed path.
• dotted: A dotted path.
• hidden: The entire link is invisible. (including the label and arrow)

const link = {
	source: "node1",
	target: "node2",
	type: "solid",
};

import { LinkType } from "@livereader/graphly-d3";
const link = {
	source: "node1",
	target: "node2",
	type: LinkType.Solid,
};

Directed ​

The link directed property takes a boolean value and defines whether the link represents a directed relationship. Default is false. If true, an arrow gets drawn at the head of the line, directed towards the target node.

const link = {
	source: "node1",
	target: "node2",
	directed: true,
};

const link = {
	source: "node1",
	target: "node2",
	directed: "both", // or "head" or "tail"
};

Label ​

The link label property is optional and takes a string value that can be used to display a label at the center of the link. The text position takes the curvature of the line into account to be placed at the correct position.

const link = {
	source: "node1",
	target: "node2",
	label: "links to",
};

Strength ​

The link strength property is used to control the force that the link applies to its nodes. It can be a numeric value to define the strength or one of the following predefinitions as string value:

enum LinkStrength {
	Strong = "strong",
	Weak = "weak",
	Loose = "loose",
}

• strong: Predefinition for the strength 0.5.
• weak: Predefinition for the strength 0.3.
• loose: Predefinition for the strength 0.

const link = {
	source: "node1",
	target: "node2",
	strength: "strong",
};

import { LinkStrength } from "@livereader/graphly-d3";
const link = {
	source: "node1",
	target: "node2",
	strength: LinkStrength.Strong,
};

Padding ​

The link padding property is an optional number value that defines the space between the link and the nodes it connects. The default value is 10.

const link = {
	source: "node1",
	target: "node2",
	padding: 10,
};

Width ​

The link width property is an optional number value that defines the width of the link and arrow paths. The default value is 2.

const link = {
	source: "node1",
	target: "node2",
	width: 2,
};

Curvature ​

The link curvature property is an optional number value that defines the curvature of the link. It can be handy to fine-tune the appearance of your graph but it is strongly recommended to leave this value unset since it is automatically calculated.

const link = {
	source: "node1",
	target: "node2",
	curvature: 0.1,
};

Color ​

The link color property is an optional string value that defines the color of the link, arrow and label. It can be handy to fine-tune the appearance of your graph and enables you to define a color for each link individually.
By leaving this value unset, the color of the link is defined by the style sheet.

const link = {
	source: "node1",
	target: "node2",
	color: "#4db6ac",
};

Payload ​

The link payload property is an optional object that can be used to store custom data and use it in custom processing steps. It has no effect on the graph visualization.

const link = {
	source: "node1",
	target: "node2",
	payload: {
		// put your custom data here
	},
};

Playground ​

Give it a try and see how the different properties influence the appearance and behavior of links. You can also try to set multiple links.