dagre-d3-es

What is dagre-d3-es?

The dagre-d3-es package is a JavaScript library that provides tools for creating directed graphs and rendering them using D3.js. It is particularly useful for visualizing hierarchical data structures, such as flowcharts, dependency graphs, and organizational charts.

What are dagre-d3-es's main functionalities?

Graph Creation

This feature allows you to create a directed graph, add nodes, and define edges between them. The code sample demonstrates how to create a graph, add nodes 'A' and 'B', and create an edge from 'A' to 'B'.

const dagreD3 = require('dagre-d3-es');
const graphlib = require('graphlib');

// Create a new directed graph
const g = new graphlib.Graph().setGraph({});

// Add nodes to the graph
g.setNode('A', { label: 'Node A' });
g.setNode('B', { label: 'Node B' });

// Add an edge between nodes
g.setEdge('A', 'B');

console.log(g.nodes()); // ['A', 'B']
console.log(g.edges()); // [{ v: 'A', w: 'B' }]

Graph Rendering

This feature allows you to render the graph using D3.js. The code sample demonstrates how to create a graph, add nodes and edges, and render the graph in an SVG element.

const d3 = require('d3');
const dagreD3 = require('dagre-d3-es');

// Create a new directed graph
const g = new dagreD3.graphlib.Graph().setGraph({});

// Add nodes and edges
g.setNode('A', { label: 'Node A' });
g.setNode('B', { label: 'Node B' });
g.setEdge('A', 'B');

// Create the renderer
const render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
const svg = d3.select('svg'),
    svgGroup = svg.append('g');

// Run the renderer. This is what draws the final graph.
render(d3.select('svg g'), g);

Graph Layout

This feature allows you to define the layout of the graph. The code sample demonstrates how to set the layout direction to 'LR' (left-to-right) and apply it to the graph.

const dagreD3 = require('dagre-d3-es');
const graphlib = require('graphlib');

// Create a new directed graph
const g = new graphlib.Graph().setGraph({});

// Add nodes and edges
g.setNode('A', { label: 'Node A' });
g.setNode('B', { label: 'Node B' });
g.setEdge('A', 'B');

// Set layout options
const layout = dagreD3.layout().rankDir('LR');

// Apply the layout to the graph
layout(g);

console.log(g.nodes()); // ['A', 'B']
console.log(g.edges()); // [{ v: 'A', w: 'B' }]

Other packages similar to dagre-d3-es

cytoscape

Cytoscape is a graph theory library for visualizing complex networks and integrating these with any web application. It provides a rich set of features for graph manipulation and visualization, including various layout algorithms, styling options, and interaction capabilities. Compared to dagre-d3-es, Cytoscape offers more advanced features and greater flexibility but may have a steeper learning curve.

vis-network

vis-network is a library to visualize dynamic, interactive networks. It is part of the vis.js suite and provides a variety of options for customizing the appearance and behavior of the network. vis-network is known for its ease of use and interactive capabilities, making it a good alternative to dagre-d3-es for simpler use cases.

sigma

Sigma is a JavaScript library dedicated to graph drawing. It is designed to handle large-scale graphs and provides various features for graph visualization, including different layout algorithms and interaction options. Sigma is more focused on performance and scalability compared to dagre-d3-es, making it suitable for applications dealing with large datasets.

README

dagre-d3-es

The dagre-d3 library is not maintained anymore.

dagre-d3-es is a fork using the more modern ES6 javascript syntax. It uses ES modules, thus the name dagre-d3-es.

dagre-d3-es follows d3 versions. Ex: dagre-d3-es version 7 depends on d3 version 7.

Demos

Simple graph demo using react, dagre-d3-es, d3 version 7.2.

Install

npm install dagre-d3-es --save

Code example

Coming from the legacy dagre-d3, the main changes in your code will be:

import * as dagreD3 from 'dagre-d3-es';
...
const g = new dagreD3.graphlib.Graph().setGraph({});
...
const zoom = d3.zoom().on('zoom', (zoomEvent) => {
  inner.attr('transform', zoomEvent.transform);
});