This is a PHP web application that displays a directed acyclic graph in a modern web browser using d3.js. It is designed for illustrating the relationships between objects in a process.
https://nylen.io/d3-process-map/
https://nylen.io/d3-process-map/?dataset=les-mis
The application can display one or more datasets located in the data/
folder.
Each dataset gets its own folder. There are two datasets bundled with the
application (one for each of the examples above). Switch between datasets by
appending ?dataset=folder-name
to the URL. If no dataset name is given, the
dataset in the default
folder will be displayed.
Each dataset should contain the following files:
objects.json
config.json
*.mkdn
(one per object)objects.json
An array of data objects to be displayed as graph nodes, each with the following properties:
name
: The name of this objecttype
: The type of this object (e.g. view
, table
, etc.)depends
: An array of object names that this object depends on.group
(optional): This could be thought of as a "subtype".config.json
A JSON object which contains the following fields:
title
: The page title.graph
: The parameters for the graph and the d3.js force layout.
linkDistance
: The
link distance
for the d3.js force layout.charge
: The
charge
for the d3.js force layout.height
: The height of the graph, in pixels. (The width of the graph is
determined by the width of the browser window when the page is loaded.)numColors
: The number of colors to display (between 3 and 12).labelPadding
: The padding inside the node rectangles, in pixels.labelMargin
: The margin outside the node rectangles, in pixels.types
: Descriptions of the object types displayed in this graph, each with
a long
and a short
field that describe the object type for documentation
and for the graph legend, respectively.constraints
: An array of objects that describe how to position the nodes.
Each constraint should have a type
field whose value should be either
'position'
or 'linkStrength'
, and a has
field that specifies the
conditions an object must meet for the constraints to be applied.
weight
, x
(optional) and y
(optional). On each iteration of the
force layout, node positions will be "nudged" towards the x
and/or y
values given, with a force proportional to the weight
given.strength
, which is a multiplier on the link strength of the links to and
from the objects that the constraint applies to. This can be used to relax
the position of certain nodes.*.mkdn
Each object can have a Markdown file associated with it for additional
documentation. The syntax is
standard Markdown with
one addition: object names can be enclosed in {{brackets}}
to insert a link
to that object.
If an object's name contains a slash (/
), replace it with an underscore (_
)
in the documentation filename.
The code uses a d3.js force layout to compute object positions, with collision detection to prevent nodes from overlapping each other.
Nodes are colored by the
ColorBrewer Set3 scheme,
with colors assigned by the combination of the object's type
and group
.
To ensure that the arrows on the ends of the links remain visible, the links only extend to the outer edge of the target object's node.
Works in recent versions of Chrome and Firefox. Other browsers have not been tested, but Internet Explorer doesn't stand a chance until at least version 9.