Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
ngraph.forcelayout
Advanced tools
This is a force directed
graph layouter in 2d. It is using quad tree as an n-body solver. This repository
is part of ngraph family, and operates on
ngraph.graph
data structure. If you
want to go the 3D space, please check out ngraph.forcelayout3d
First of all it's worth to mention all force directed algorithms are iterative. We need to perform multiple iterations of an algorithm, before graph starts looking aesthetically pleasing.
With that in mind, the easiest way to make graph look nice is:
// graph is an instance of `ngraph.graph` object.
var layout = require('ngraph.forcelayout')(graph);
for (var i = 0; i < ITERATIONS_COUNT; ++i) {
layout.step();
}
// now we can ask layout where each node/link is best positioned:
graph.forEachNode(function(node) {
console.log(layout.getNodePosition(node.id));
// Node position is pair of x,y coordinates:
// {x: ... , y: ... }
});
graph.forEachLink(function(link) {
console.log(layout.getLinkPosition(link.id));
// link position is a pair of two positions:
// {
// from: {x: ..., y: ...},
// to: {x: ..., y: ...}
// }
});
Result of getNodePosition()
/getLinkPosition()
will be always the same for
the same node. This is true:
layout.getNodePosition(1) === layout.getNodePosition(1);
Reason for this is performance. If you are interested in storing positions somewhere else, you can do it and they still will be updated after each force directed layout iteration.
Sometimes it's desirable to tell layout algorithm not to move certain nodes.
This can be done with pinNode()
method:
var nodeToPin = graph.getNode(nodeId);
layout.pinNode(nodeToPin, true); // now layout will not move this node
If you want to check whether node is pinned or not you can use isNodePinned()
method. Here is an example how to toggle node pinning, without knowing it's
original state:
var node = graph.getNode(nodeId);
layout.pinNode(node, !layout.isNodePinned(node)); // toggle it
What if you still want to move your node according to some external factor (e.g.
you have initial positions, or user drags pinned node)? To do this, call
setNodePosition()
method:
layout.setNodePosition(nodeId, x, y);
Like many other algorithms in ngraph
family, force layout monitors graph changes
via graph events.
It keeps layout up to date whenever graph changes:
var graph = require('ngraph.graph')(); // empty graph
var layout = require('ngraph.layout')(graph); // layout of empty graph
graph.addLink(1, 2); // create node 1 and 2, and make link between them
layout.getNodePosition(1); // returns position.
If you want to stop monitoring graph events, call dispose()
method:
layout.dispose();
Since this is force directed layout, sometimes it's desirable to adjust physics simulator. Please refer to ngraph.physics.simulator to see source code and simulator parameters. Once you have instance of physics simulator you can pass it as a second argument to layout constructor:
// Configure
var physicsSettings = {
springLength: 30,
springCoeff: 0.0008,
gravity: -1.2,
theta: 0.8,
dragCoeff: 0.02,
timeStep: 20
};
// pass it as second argument to layout:
var layout = require('ngraph.forcelayout')(graph, physicsSettings);
You can get current physics simulator from layout by checking layout.simulator
property. This is a read only property.
Finally, it's often desirable to know how much space does our graph occupy. To
quickly get bounding box use getGraphRect()
method:
var rect = layout.getGraphRect();
// rect.x1, rect.y1 - top left coordinates of bounding box
// rect.x2, rect.y2 - bottom right coordinates of bounding box
This is advanced technique to get to internal state of the simulator. If you need
to get a node position use regular layout.getNodePosition(nodeId)
described
above.
In some cases you really need to manipulate physic attributes on a body level. To get to a single body by node id:
var graph = createGraph();
graph.addLink(1, 2);
// Get body that represents node 1:
var body = layout.getBody(1);
assert(
typeof body.pos.x === 'number' &&
typeof body.pos.y === 'number', 'Body has positoin');
assert(body.mass, 'Body has mass');
To iterate over all bodies at once:
layout.forEachBody(function(body, nodeId) {
assert(
typeof body.pos.x === 'number' &&
typeof body.pos.y === 'number', 'Body has positoin');
assert(graph.getNode(nodeId), 'NodeId is coming from the graph');
});
With npm do:
npm install ngraph.forcelayout
MIT
I'd totally love it! Please email me, open issue here, tweet to me, or join discussion on gitter.
FAQs
Force directed graph drawing layout
We found that ngraph.forcelayout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.