Environment ​

The ForceSimulation class provides a number of methods for setting up and manipulating the environment.

SVG Element ​

The ForceSimulation class requires a <svg> element as constructor input to render the graph. But it also exposes the svgElement member which allows you to change the SVG element later which will automatically re-render the graph with the new SVG element.

simulation.svgElement = document.getElementById("myNewSVG");

Render ​

The ForceSimulations render() method is called to render the given graph input in the SVG element. The render method also takes two optional arguments: the alpha value that represents the initial simulation alpha and the forced flag that can be set to true to force the whole graph to be re-rendered.

const graph = {
	nodes: [...],
	links: [...],
}
simulation.render(graph);

simulation.render(graph, 0.05, true);

Snapshot ​

The ForceSimulations snapshot() method is called to render a snapshot of the force simulation and returns a static SVGElement DOM node.

const snapshow = simulation.snapshot();

Template Store ​

The ForceSimulation class contains and exposes the templateStore module which is used to store the shape templates that are used to render the nodes. This module contains two functionalities that are interesting for you.

Remote Origin ​

The remoteOrigin member of the templateStore module can be used to set the url from which the templates will be imported dynamically during the rendering process.

simulation.templateStore.remoteOrigin = "https://distributed-template-server/";

Add Template ​

The add() method of the templateStore module is used to add a template to the store under a given type.

import MyTemplate from "./templates/myTemplate";
simulation.templateStore.add("myTemplate", MyTemplate);

Export Graph ​

The ForceSimulation class provides a exportGraph() method that is strongly recommended to be used to get a version of the graph data that can be used for further processing by you.

const graph = simulation.exportGraph();

Selected Nodes ​

The ForceSimulation class exposes a selectedNodes member that holds an array of the ids of all nodes that are currently to be rendered as selected.

simulation.selectedNodes = ["node1", "node2"];

Env Gravity ​

The ForceSimulation class exposes a envGravity setter that can be used to set the default gravitational force of nodes to be applied to each other. It is set to -10000 by default.

simulation.envGravity = -5000;

Link Distance ​

The ForceSimulation class exposes a linkDistance setter that can be used to set the minimum distance all links strive to. The default value is 400. The distance is measured from the center point of either node, so the node size has to be considered.

simulation.linkDistance = 250;

Animation Duration ​

The ForceSimulation class exposes a animationDuration member that can be used to set the duration of the animation in milliseconds. The default value is 300.

simulation.animationDuration = 500;

Draggable Nodes ​

The ForceSimulation class exposes a draggableNodes member that can be used to set whether or not nodes can be dragged by the user. The default value is true.

simulation.draggableNodes = false;

Debug ​

The ForceSimulation debug object can be used to enable certain additional debug features. It supports displaying the calculated gly-body points of the nodes.

Just enable debug mode with simulation.debug.enabled = true;

simulation.debug = {
	enabled: false,
	bodyPoints: {
		enabled: true,
		color: "#00ffff",
	},
};