dagre-d3

What is dagre-d3?

The dagre-d3 npm package is a JavaScript library that provides tools for creating directed graphs and rendering them using D3.js. It is built on top of the Dagre layout engine, which is responsible for computing the layout of the graph, and D3.js, which is used for rendering the graph in a web browser.

What are dagre-d3's main functionalities?

Creating a basic graph

This code demonstrates how to create a basic directed graph with two nodes and one edge using dagre-d3. The graph is then rendered using D3.js.

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

// Create a new directed graph
const g = new dagreD3.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');

// 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);

Customizing node and edge styles

This code demonstrates how to customize the styles of nodes and edges in a directed graph using dagre-d3. Nodes and edges are styled using CSS properties.

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

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

// Add nodes with custom styles
g.setNode('A', { label: 'Node A', style: 'fill: #f77' });
g.setNode('B', { label: 'Node B', style: 'fill: #7f7' });

// Add an edge with a custom style
g.setEdge('A', 'B', { style: 'stroke: #333; stroke-width: 2px;' });

// 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);

Adding tooltips to nodes

This code demonstrates how to add tooltips to nodes in a directed graph using dagre-d3. Tooltips are added by appending a 'title' element to each node.

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

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

// Add nodes with tooltips
g.setNode('A', { label: 'Node A', title: 'This is Node A' });
g.setNode('B', { label: 'Node B', title: 'This is Node B' });

// Add an edge between nodes
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);

// Add tooltips
svg.selectAll('g.node').append('title').text(function(d) { return g.node(d).title; });

Other packages similar to dagre-d3

cytoscape

Cytoscape is a graph theory library for visualizing and analyzing networks. It provides a wide range of features for graph manipulation, layout, and rendering. Compared to dagre-d3, Cytoscape offers more advanced features and a more extensive API for working with complex graphs.

vis-network

vis-network is a library for creating, manipulating, and interacting with network graphs. It provides a variety of layout algorithms and interaction options. vis-network is more focused on interactivity and dynamic graph manipulation compared to dagre-d3.

sigma

Sigma is a JavaScript library dedicated to graph drawing. It is designed to handle large graphs and provides various layout algorithms and rendering techniques. Sigma is more performance-oriented and suitable for visualizing large-scale graphs compared to dagre-d3.

README

dagre-d3 - A D3-based renderer for dagre

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts as a front-end to dagre, providing actual rendering using D3.

For more details, including examples and configuration options, please see our wiki.

License

dagre-d3 is licensed under the terms of the MIT License. See the LICENSE file for details.