@cllu/d3-dag
v0.4.6
Published
Layout algorithms for visualizing directed acylic graphs.
Downloads
35
Readme
d3-dag
Often data sets are hierarchical, but are not in a tree structure, such as genetic data.
In these instances d3-hierarchy
may not suit your needs, which is why d3-dag
(Directed Acyclic Graph) exists.
This module implements a data structure for manipulating DAGs.
Old versions were designed to mimic d3-hierarchy
's api as much as possible, newer versions have opted to use modern javascript conventions while breaking from the standard
Examples
- Examples with Sugiyama Layout - Allows you to experiment with different layouts and different datasets for the sugiyama layout.
- Examples with Topological Layout - Allows you to experiment with different layouts and different datasets for topological layouts.
- Example with Arrows - This example shows a simple, if inexact, way to render edge arrows with d3.
- Examples with Arquint Layout - Allows you to experiment with different layouts and different datasets for the arquint layout.
- Expandable Family Tree - An expandable family tree rendered using d3-dag.
Installing
If you use NPM, npm i d3-dag
.
Otherwise you can load it using unpkg
:
<script src="https://unpkg.com/[email protected]"></script>
<script>
var dag = d3.sugiyama();
</script>
API Reference
- Javascript API - methods exported to flat javascript
- DAG - documentation on the DAG structur
- Creating DAGs from data
- Layout algorithms
Updating
Information for major changes between releases
Updating from 0.3 to 0.4
The update from 0.3 to 0.4 adds support for typescript, and makes a number of backwards incompatible changes that arrise from the switch. Some are also the result of cleaning up hasty early design decisions.
- Instead of having
linkData
accessors, buildersstratify
andhierarchy
now have eitherchildren
/parentIds
orchildrenData
/parentData
that combine the children/parents with the data for the link. The build link data into the design of the dag and removes the messy handling of the fact that data was tacked on. points
was moved from a property on linkData to its own top level link property, since it's somewhat required to be there and shouldn't be mutating user supplied data.copy
,reverse
, andequal
have been removed as the new structure made them hard to support, as DAGs are viewed more immutably now. Support could potentially be added back.- Some DAG methods likes
some
andevery
have been removed because they're better supported by the fulent iterators returned byidescendants
. - In arquint, the height ratio property was switched to an accessor to be more inline with other methods.
- Documention has moved from the README to inline, and a github pages generated by typedoc.
- Switched from npm to yarn.
Updating from 0.1 to 0.2
The update from 0.1 to 0.2 includes a few small backwards incompatible changes.
dratify
was renamed todagStratify
anddierarchy
was renamed todagHierarchy
in order to pollute the d3 namespace less.- After running a
sugiyama
layout, thepoints
attribute will always exist for every links data, and it now also contains the start and end points. coordSpread
was removed in favor ofcoordCenter
which produces a slightly better layout in the same amount of time.test/data
was moved toexamples
. This isn't technically part of the api, but it may break examples that required the old file location.- Link data is created at dag creation time. This also isn't technically backwards compatible but might increase memory consumption.