dagre-d3

The render function is the primary entry point for drawing a graph using D3. It returns a function that accepts an SVG element and a graph object (compatible with dagre). When called, it performs layout calculation via dagre and renders nodes, clusters, edge paths, and edge labels into the provided SVG.

To use it, call render() to get the rendering function, then pass your D3 selection and the graph object to that function.

The function returned by render() can be configured with custom implementations for various rendering components. These methods use a fluent interface: calling a setter returns the rendering function itself, allowing you to chain configurations.

Available customization methods:

• createNodes(value): Replace the node creation logic.
• createClusters(value): Replace the cluster creation logic.
• createEdgeLabels(value): Replace the edge label creation logic.
• createEdgePaths(value): Replace the edge path creation logic.
• shapes(value): Replace the node shapes definitions.
• arrows(value): Replace the arrow definitions.

The addHtmlLabel function allows you to render complex HTML content inside a graph node or edge by using a foreignObject element. This is useful when standard SVG text is insufficient for your labeling needs.

To use this function, you must provide a root (the D3 selection where the label will be appended) and a node (the graph element containing the label data).

Label Data Types Supported:

• Function: A function that returns a D3 selection or DOM element. It will be inserted into the label container.
• Object: Assumed to be a DOM object. It will be inserted into the label container.
• Other (String/Number): The content will be set using .html(), allowing for basic HTML strings.

Styling: Styles defined in node.labelStyle are applied to the container div using util.applyStyle.

The lib/arrows.js module provides different arrowhead rendering functions that can be used to customize the appearance of edges. When configuring edges, you can choose from the following styles:

• normal (or default): A standard triangular arrowhead.
• vee: A 'V' shaped arrowhead.
• undirected: A simple line segment used for undirected edges (no arrowhead).

Each function accepts the following parameters:

• parent: The D3 selection (usually the SVG container) where the marker will be appended.
• id: A unique identifier for the marker.
• edge: The edge object containing styling information.
• type: A string prefix used to look up style properties on the edge object (e.g., if type is 'label', it looks for labelStyle and labelClass).

Arrowhead styles are applied to edges using specific property keys on the edge object. The renderer looks for properties based on the type argument passed to the arrow function.

If the type is label, the renderer will look for:

1. labelStyle: An object used to apply styles (via util.applyStyle) to the arrowhead path.
2. labelClass: A string representing a CSS class to be applied to the arrowhead path.

Example edge object structure:

const edge = {
  labelStyle: { stroke: 'red', 'stroke-width': 2 },
  labelClass: 'my-custom-arrow-class'
};

The following modules are exported by the dagre-d3 entry point:

• graphlib: Graph data structures and manipulation.
• dagre: The layout engine used to calculate node and edge positions.
• intersect: Intersection calculations.
• render: The D3-based renderer that converts graph data into visual elements.
• util: Utility functions.
• version: The current version of the package.

module.exports = {
  graphlib: require("./lib/graphlib"),
  dagre: require("./lib/dagre"),
  intersect: require("./lib/intersect"),
  render: require("./lib/render"),
  util: require("./lib/util"),
  version: require("./lib/version")
};