smbolton/dagre-d3v4

A D3-based renderer for the dagre directed graph layout library, updated for compatibility with D3 version 4.

dagre-d3v4 - 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-d3v4 library acts as a front-end to dagre, providing actual rendering using D3.

This repository is a fork of dagre-d3 providing support for D3 version 4.

Chris Pettitt's original, unmaintained dagre-d3 repository can be found here, as can the original wiki.

API Changes from dagre-d3 version 0.4.x to dagre-d3v4 version 0.5.0

1. Edge path line interpolation now reflects the D3v4 curve API. Replace:

   g.setEdge("A", "B", { lineInterpolate: "basis" });
   g.setEdge("A", "C", { lineInterpolate: "basis" });

   with e.g.:

   g.setEdge("A", "B", { curve: d3.curveBasis });
   g.setEdge("A", "C", { curve: d3.curveCardinal.tension(0.6) });

   The default curve is d3.curveLinear.

License

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

dagre-d3v4's Issues

Security vulnerability found with old version of lodash

npm audit:
=== npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│ Manual Review │
│ Some vulnerabilities require your attention to resolve │
│ │
│ Visit https://go.npm.me/audit-guide for additional guidance │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Prototype Pollution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=4.17.11 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ dagre-d3v4 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ dagre-d3v4 > dagre > graphlib > lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/782 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Prototype Pollution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=4.17.11 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ dagre-d3v4 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ dagre-d3v4 > dagre > lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/782 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Prototype Pollution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=4.17.11 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ dagre-d3v4 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ dagre-d3v4 > graphlib > lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/782 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Prototype Pollution │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=4.17.11 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ dagre-d3v4 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ dagre-d3v4 > lodash │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/782 │

Similar result with yarn audit

how to use in angular

I want to use it in angular app.

Can I use @types/dagre-d3 as the type definitions of dagre-d3v4 ?

Hello，
Can I use @types/dagre-d3 as the type definitions of dagre-d3v4 ?
https://www.npmjs.com/package/@types/dagre-d3

The order of the same layer nodes

How does dagre determine the order (left,right side) of nodes?
If I want graph to follow the order of my add node sequence, how can I do ?

when I add node by ABCD, it work well, but when map becomes more complicated. it wrong.

e.g. A.B1.C1.D1.E1.F1

Thanks a lot. It it a very wonderful tool.

Not getting it to work

import * as d3 from 'd3';
import { Graph } from 'graphlib';
import dot from 'graphlib-dot';
import dagreD3 from 'dagre-d3v4';

const svg = d3
	.select('body')
	.append('svg')
	.attr('width', window.innerWidth)
	.attr('height',window.innerHeight)

var digraph = dot.read("digraph { 1; 2;}");

console.log(digraph.nodes());
console.log(digraph.edges());
console.log(digraph.edge("1", "2"));

svg.append('g');

var renderer = new dagreD3.render();

digraph.children = () => [];
console.log(digraph);

renderer(d3.select("svg g"), digraph);

create-nodes.js:26 Uncaught TypeError: Cannot read property 'select' of undefined
    at SVGGElement.<anonymous> (create-nodes.js:26)
    at Selection.__webpack_exports__.a [as each] (each.js:5)
    at createNodes (create-nodes.js:24)
    at fn (render.js:25)
    at Object.name (index.js:42)
    at __webpack_require__ (bootstrap c4fe5883d869c05f87ce:19)
    at Object.<anonymous> (intersect-rect.js:32)
    at __webpack_require__ (bootstrap c4fe5883d869c05f87ce:19)
    at __webpack_exports__.b (bootstrap c4fe5883d869c05f87ce:62)
    at bootstrap c4fe5883d869c05f87ce:62

I also tried the following example but I'm getting the same error: http://www.samsarin.com/project/dagre-d3/latest/demo/sentence-tokenization.html