# dagre-d3-es

Latest version **7.0.14** (published 2025-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install dagre-d3-es
pnpm add dagre-d3-es
yarn add dagre-d3-es
bun add dagre-d3-es
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.0.14 |
| Published | 2025-12-03 |
| First published | 2022-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 237.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Maintainers | teebo47 |
| Keywords | dagre-d3 |

## Links

- npm: https://www.npmjs.com/package/dagre-d3-es
- Repository: https://github.com/tbo47/dagre-es
- Homepage: https://github.com/tbo47/dagre-es#readme
- Issues: https://github.com/tbo47/dagre-es/issues
- npm.io page: https://npm.io/package/dagre-d3-es

## Dependencies (2)

- [d3](https://npm.io/package/d3.md) ^7.9.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 7.0.14 (latest) — 2025-12-03
- 7.0.13 — 2025-10-24
- 7.0.12 — 2025-10-07
- 7.0.11 — 2024-10-01
- 7.0.10 — 2023-03-11
- 7.0.9 — 2023-02-24
- 7.0.8 — 2023-02-02
- 7.0.6 — 2022-12-14
- 7.0.5 — 2022-12-13
- 7.0.4 — 2022-11-20
- 7.0.2 — 2022-11-06
- 7.0.1 — 2022-04-09
- 7.0.0 — 2022-01-06
- 5.0.2 — 2022-01-06
- 5.0.1 — 2022-01-06
- … 1 more at https://npm.io/package/dagre-d3-es/versions

## README

<p align="center">
  <a href="https://tbo47.github.io/" ><img src="https://img.shields.io/badge/created_by-tbo47-blue.svg" alt="Created by tbo47"></a>
  <a href="https://www.npmjs.com/dagre-d3-es"><img src="https://img.shields.io/npm/v/dagre-d3-es.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="dagre-d3-es on npm" /></a>&nbsp;
  <a href="https://www.npmjs.com/dagre-d3-es"><img src="https://img.shields.io/npm/dw/dagre-d3-es.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="dagre-d3-es on npm" /></a>
</p>

# dagre-d3-es

[dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) is a fork of [dagre-d3](https://github.com/dagrejs) using the more modern ES6 javascript syntax.

It uses [ES](https://262.ecma-international.org/6.0/) modules, thus the name [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es).

[dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) follows [d3](https://www.npmjs.com/package/d3) versions. Ex: dagre-d3-es version 7 depends on [d3](https://www.npmjs.com/package/d3) version 7.

## Demos

- [simple graph demo](https://codesandbox.io/s/dagre-d3-es-tree-9ywg9) using react
- clone and run [dagre-es-example](https://github.com/tbo47/dagre-es-example) using angular
- [vanilla javascript example](https://tbo47.github.io/dagre-d3-esm_example1/)
- [jsfiddle vanilla javascript example](https://jsfiddle.net/tbo47/fm9ovqeb/)

## Install

```
npm install dagre-d3-es
```

## 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);
});

```

---
_Source: https://npm.io/package/dagre-d3-es · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._