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 node, npm i d3-dag or yarn add 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 structure
• Creating DAGs from data
  • Hierarchy - data in dag format
  • Stratify - data in tabular format
  • Connect - data in edge format
• Layout algorithms
  • Sugiyama - standard layout
  • Zherebko - topological layout
  • Arquint - variable sized nodes

Updating

Information for major changes between releases

Updating from 0.5 to 0.6

The only breaking change happens if you happend to use this linrary in typescript, and happened store an operator with its types attached (e.g. layout: SugiyamaOperator<NodeType, ...> = ...). All of the individual attribute modifier functions retained their generic signatures.

The typing for most operators changed to more easily allow adding new typed attributes later on. sugiyama went from being typed like sugiyama<NodeType, LayeringType, DecrossType, ...> to sugiyama<NodeType, { layering: LayeringType, decross: DecrosType, ... }>. To update, you'll need to change these declarations.

Updating from 0.4 to 0.5

The way Sugiyama layout works was entirely rewritten. Instead of defaulting to fitting nodes into [0, 1] in x and y, it now features a nodeSize accessor. Nodes are spaced out to respect their nodeSizes, along x coordinates this is exact, the y coordinates will respect the max height in each layer. As a result of the this change, there is no longer a separation accessor, as the role of that was replaced by specifying node sizes. Also, instead of sugiyama layout just returning the laidout dag (nice for type script), it now return an object with the dag, as well as the width and height of the final dag, including "padding" for node sizes. The default size of dummy nodes is [0, 0]. To get back to almost the old behavior, you can still specify a size. This will rescale everything, but still keep the outside padding.

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, builders stratify and hierarchy now have either children/parentIds or childrenData/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, and equal 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 and every have been removed because they're better supported by the fulent iterators returned by idescendants.
• 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 to dagStratify and dierarchy was renamed to dagHierarchy in order to pollute the d3 namespace less.
• After running a sugiyama layout, the points attribute will always exist for every links data, and it now also contains the start and end points.
• coordSpread was removed in favor of coordCenter which produces a slightly better layout in the same amount of time.
• test/data was moved to examples. 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.