Move and Zoom ​

The ForceSimulation class provides a number of interfaces to interact with the capability to zoom and pan the graph as well as to move to coordinates.

Zoom Enabled ​

The ForceSimulation class has a public zoomEnabled member setter that can be set to true or false. This enables or disables the zooming functionality affecting panning, pinching and zooming.

By default, the zooming is enabled.

simulation.zoomEnabled = true;

Zoom Scale Extent ​

The ForceSimulation class has a public zoomScaleExtent member setter that can be set to an array of two numbers. They define the minimum and maximum zoom scale values a user can zoom in and out by pinching or zooming.

zoomScaleExtent is set to [0.1, 3] by default.

simulation.zoomScaleExtent = [0.1, 3];

World Transform ​

The ForceSimulation class has a public transform member that can holds the current transform of the svg world.

transform is set to { k: 1, x: 0, y: 0 } at the beginning.

const transform = simulation.worldTransform;

World Bounds ​

The ForceSimulation class has a public worldBounds getter that returns the current bounds that the svg element is showing. This depends on the worldTransform and the svg element dimensions.

const bounds = simulation.worldBounds;

Move To ​

The ForceSimulation exposes a powerful moveTo() method that can be used to move the svg world to a specific coordinate or to display certain bounds. It takes an MoveOptions object as input.

interface MoveOptions {
	transform?: Transform;
	boundaries?: Boundary[];
	nodes?: Node[];
	duration?: number;
	padding?: number;
}

simulation.moveTo({
	transform: { k: 1, x: 0, y: 0 },
	duration: 1000,
});

const newNode = {
	id: "newNode",
	shape: {
		type: "myShape",
		scale: 1,
	},
	x: 1000,
	y: 500,
};
simulation.render(newNode);
simulation.moveTo({
	boundaries: [simulation.worldBounds],
	nodes: [newNode],
	padding: 50,
});