Home

Ciena-Dagre-D3 is a D3-based renderer for dagre. This version using ciena-dagre version and based on dagre-d3v4 version.

• Example
• Bug Tracking or Ciena-Dagre Issues
• Contributing

Example

This following code block shows a small example of how to use d3 renderer:

import * as d3 from 'd3';
import graphlib from 'ciena-graphlib';
import dagreD3 from 'ciena-dagre-d3';

// Create a new directed graph
var g = new graphlib.Graph();

// Set properties as an object for the graph label
g.setGraph({ marginx: 20, marginy: 20 });

// Default properties by assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function() { return {}; });

// Create three nodes.
g.setNode(1, { label: 1, width: 200, height: 200, style: { strokeWidth: 1.5} });
g.setNode(2, { label: 2, width: 200, height: 200, style: {fill: 'none', stroke: 'red'} });
g.setNode(3, { label: 3, width: 200, height: 200, style: {fill: 'none', stroke: 'blue'} });

// Create two edges.
g.setEdge(2, 1, { label: 'Yes', style: { stroke: "black" } });
g.setEdge(2, 3, { style: { stroke: "black" }, curve: d3.curveBasis });

// Use D3 js to select output
var svg = d3.select("#mainPaper svg")
            .append('g');

// Apply zoom and panning
d3.select("#mainPaper svg")
  .call(d3.zoom()
          .scaleExtent([1, 1])
          .on("zoom", () => {
             svg.attr("transform", d3.event.transform);
          })
  )
  .on("dblclick.zoom", null);

// Prepare D3 dagre renderer
var render = dagreD3.render();

g.graph().transition = function(selection) {
   return selection.transition().duration(500);
};

// Calculate layout and draw
svg.call(render, g);

License

Dagre is licensed under the terms of the MIT License. See LICENSE for details.