Introduction ​

Graphly D3 utilizes the force simulation of d3 and builds on top of it to make shape templates possible. To enable those additional features, Graphly takes the data structure of the force simulation and adds a number of further data properties to it.

The data structure extensions are described in more detail on the following pages.

Original Data Structure ​

The data required by the vanilla d3 force simulation is an array of nodes and an array of links with very rudimentary properties.

Each node object requires only an id property to identify it.
Each link object takes a source and target property to know the ids of the nodes it connects.

const graph = {
	nodes: [{ id: "node1" }, { id: "node2" }],
	links: [{ source: "node1", target: "node2" }],
};

Runtime Additions ​

When the data is rendered to display a force-directed graph, the node objects are populated with additional properties. They represent the position and velocity of the node.