Node Data ​

The original node object only requires an id property so d3 can identify the node. Graphly D3 extends this data structure quite a bit to provide additional properties to describe appearance and behavior of any node.

const node = {
	id: "node1",
	x: 150,
	y: -30,
	shape: {
		type: "myShape",
		scale: 1,
	},
	gravity: -5000,
	spawn: {
		source: "node2",
		angle: 45,
		distance: 600,
	},
	anchor: {
		type: "soft",
		x: 300,
		y: 100,
	},
	satellite: {
		source: "node2",
		angle: 45,
		distance: 600,
	},
	payload: {
		// put your custom data here
	},
};

Interface ​

interface Node {
	id: string;
	x?: number;
	y?: number;
	shape: Shape;
	gravity?: number;
	spawn?: Spawn;
	anchor?: Anchor;
	satellite?: Satellite;
	payload?: any;
}

Id & Position ​

The node id property is a string to uniquely identify a node in the graph.
The node x and y properties are optional and define the position of the node. If not defined the simulation will place them at 0,0 by default except spawn, anchor or satellite properties are set.

const node = {
	id: "node1",
	x: 150,
	y: -30,
};

Shape ​

The node shape object property defines the appearance of the node. It requires a type and a scale property to tell Graphly D3 how to render the node.

interface Shape {
	type: string;
	scale: number;
	url?: string;
	bodyResolution?: number;
}

const node = {
	id: "node1",
	shape: {
		type: "myShape",
		scale: 1,
	},
};

Gravity ​

The node gravity property is optional and defines the gravitational force this node applies to other nodes. If not set the envGravity of the force simulation is used.

const node = {
	id: "node1",
	gravity: -5000,
};

Spawn ​

The node spawn object property is optional and describes how the node should be placed when it is created the first time. This property is used when no position are defined yet and the node should be spawned in relative position to another node.

interface Spawn {
	source: string;
	angle: number;
	distance: number;
}

const node = {
	id: "node1",
	spawn: {
		source: "node2",
		angle: 45,
		distance: 600,
	},
};

Anchor ​

The node anchor object property is optional and describes the position to which the node is constantly heading towards.

enum AnchorType {
	Soft = "soft",
	Hard = "hard",
}
interface Anchor {
	type: AnchorType;
	x: number;
	y: number;
}

const node = {
	id: "node1",
	anchor: {
		type: "soft",
		x: 300,
		y: 100,
	},
};

import { AnchorType } from "@livereader/graphly-d3";
const node = {
	id: "node1",
	anchor: {
		type: AnchorType.Soft,
		x: 300,
		y: 100,
	},
};

Satellite ​

The node satellite object property is optional and can be used to bind one node to another. It will keep a relative position to the source node at all times.

enum SatelliteType {
	Soft = "soft",
	Hard = "hard",
}

interface Satellite {
	source: string;
	angle: number;
	distance: number;
	type?: SatelliteType;
}

const node = {
	id: "node1",
	satellite: {
		source: "node2",
		angle: 45,
		distance: 600,
		type: "soft",
	},
};

Payload ​

Put all your custom data behind the payload object property and use this data in a template to render the node in the desired way.

const node = {
	payload: {
		// put your custom data here
	},
};

Playground ​

Give it a try and see how the different properties influence the appearance and behavior of nodes.

payload: {
	title: "Hello\nWorld",
	color: "teal",
}