		@@ -0,1 +1,8 @@
		v0.3.0
		======

		* Pick up new dagre and graphlib, which yields improved performance
		* Experimental support for clusters
		* See demos for examples of how to use the new APIs (dagre-d3, dagre, graphlib)

		v0.2.9
		@@ -2,0 +9,0 @@ ======

index.js

		@@ -24,9 +24,8 @@ /**
		module.exports = {
		Digraph: require('graphlib').Digraph,
		Graph: require('graphlib').Graph,
		Renderer: require('./lib/Renderer'),
		json: require('graphlib').converter.json,
		layout: require('dagre').layout,
		version: require('./lib/version'),
		debug: require('dagre').debug
		graphlib: require("./lib/graphlib"),
		dagre: require("./lib/dagre"),
		intersect: require("./lib/intersect"),
		render: require("./lib/render"),
		util: require("./lib/util"),
		version: require("./lib/version")
		};

lib/util.js

		@@ -1,76 +0,38 @@
		/*
		* Returns the smallest value in the array.
		*/
		exports.min = function(values) {
		return Math.min.apply(null, values);
		// Public utility functions
		module.exports = {
		isSubgraph: isSubgraph,
		edgeToId: edgeToId,
		applyStyle: applyStyle,
		applyClass: applyClass
		};

		/*
		* Returns the largest value in the array.
		* Returns true if the specified node in the graph is a subgraph node. A
		* subgraph node is one that contains other nodes.
		*/
		exports.max = function(values) {
		return Math.max.apply(null, values);
		};
		function isSubgraph(g, v) {
		return !!g.children(v).length;
		}

		/*
		* Returns `true` only if `f(x)` is `true` for all `x` in `xs`. Otherwise
		* returns `false`. This function will return immediately if it finds a
		* case where `f(x)` does not hold.
		*/
		exports.all = function(xs, f) {
		for (var i = 0; i < xs.length; ++i) {
		if (!f(xs[i])) {
		return false;
		}
		}
		return true;
		};
		function edgeToId(e) {
		return escapeId(e.v) + ":" + escapeId(e.w) + ":" + escapeId(e.name);
		}

		/*
		* Accumulates the sum of elements in the given array using the `+` operator.
		*/
		exports.sum = function(values) {
		return values.reduce(function(acc, x) { return acc + x; }, 0);
		};
		var ID_DELIM = /:/g;
		function escapeId(str) {
		return str ? String(str).replace(ID_DELIM, "\\:") : "";
		}

		/*
		* Returns an array of all values in the given object.
		*/
		exports.values = function(obj) {
		return Object.keys(obj).map(function(k) { return obj[k]; });
		};
		function applyStyle(dom, styleFn) {
		if (styleFn) {
		dom.attr("style", styleFn);
		}
		}

		exports.createTimer = function(enabled) {
		var self = {};

		// Default to disabled
		enabled = enabled \|\| false;

		self.enabled = function(x) {
		if (!arguments.length) { return enabled; }
		enabled = x;
		return self;
		};

		self.wrap = function(name, func) {
		return function() {
		var start = enabled ? new Date().getTime() : null;
		try {
		return func.apply(null, arguments);
		} finally {
		if (start) { console.log(name + ' time: ' + (new Date().getTime() - start) + 'ms'); }
		}
		};
		};

		return self;
		};

		exports.propertyAccessor = function(self, config, field, setHook) {
		return function(x) {
		if (!arguments.length) { return config[field]; }
		config[field] = x;
		if (setHook) { setHook(x); }
		return self;
		};
		};
		function applyClass(dom, classFn, otherClasses) {
		if (classFn) {
		dom
		.attr("class", classFn)
		.attr("class", otherClasses + " " + dom.attr("class"));
		}
		}

lib/version.js

		@@ -1,1 +0,1 @@
		module.exports = '0.2.9';
		module.exports = "0.3.0";

package.json

		{
		"name": "dagre-d3",
		"version": "0.2.9",
		"version": "0.3.0",
		"description": "A D3-based renderer for Dagre",
		"author": "Chris Pettitt <chris@samsarin.com>",
		"keywords": [
		@@ -11,21 +12,26 @@ "graph",
		],
		"dependencies": {
		"d3": "^3.3.8",
		"dagre": "^0.6.1",
		"graphlib": "^0.9.1",
		"lodash": "^2.4.1"
		},
		"devDependencies": {
		"browserify": "2.28.x",
		"chai": "1.7.x",
		"graphlib-dot": "0.4.8",
		"jscs": "1.5.x",
		"jshint": "2.3.x",
		"mocha": "1.12.x",
		"mocha-phantomjs": "3.5.0",
		"phantomjs": "1.9.x",
		"semver": "2.1.x",
		"uglify-js": "1.2.3"
		"browserify": "^6.1.0",
		"chai": "^1.9.2",
		"jscs": "^1.7.3",
		"jshint": "^2.5.6",
		"jshint-stylish": "^1.0.0",
		"karma": "^0.12.24",
		"karma-chrome-launcher": "^0.1.5",
		"karma-coverage": "^0.2.6",
		"karma-firefox-launcher": "^0.1.3",
		"karma-mocha": "^0.1.9",
		"karma-phantomjs-launcher": "^0.1.4",
		"karma-safari-launcher": "^0.1.1",
		"mocha": "^1.21.5",
		"phantomjs": "^1.9.11",
		"semver": "^4.1.0",
		"uglify-js": "^2.4.15"
		},
		"dependencies": {
		"cp-data": "1.1.3",
		"dagre": "0.4.6",
		"d3": "~3.3.8",
		"graphlib": "0.7.4"
		},
		"author": "Chris Pettitt <chris@samsarin.com>",
		"repository": {
		@@ -35,22 +41,3 @@ "type": "git",
		},
		"license": "MIT",
		"testling": {
		"files": [
		"test/demo-test.js"
		],
		"browsers": [
		"ie/9..latest",
		"firefox/17..latest",
		"firefox/nightly",
		"chrome/22..latest",
		"chrome/canary",
		"opera/12..latest",
		"opera/next",
		"safari/5.1..latest",
		"ipad/6.0..latest",
		"iphone/6.0..latest",
		"android-browser/4.2..latest"
		],
		"harness": "mocha"
		}
		"license": "MIT"
		}

240

README.md

		@@ -1,2 +0,2 @@
		# dagre-d3 - A D3-based renderer for Dagre
		# dagre-d3 - A D3-based renderer for dagre

		@@ -6,235 +6,8 @@ [![Build Status](https://secure.travis-ci.org/cpettitt/dagre-d3.png?branch=master)](http://travis-ci.org/cpettitt/dagre-d3)
		Dagre is a JavaScript library that makes it easy to lay out directed graphs on
		the client-side. The dagre-d3 library acts a front-end to dagre, providing
		actual rendering using [D3][].
		the client-side. The dagre-d3 library acts as a front-end to dagre, providding
		actual rendering using [D3](http://d3js.org).

		Note that dagre-d3 is current a pre-1.0.0 library. We will do our best to
		maintain backwards compatibility for patch level increases (e.g. 0.0.1 to
		0.0.2) but make no claim to backwards compatibility across minor releases (e.g.
		0.0.1 to 0.1.0). Watch our [CHANGELOG](CHANGELOG.md) for details on changes.
		For more details, including examples and configuration options, please see our
		[wiki](https://github.com/cpettitt/dagre-d3/wiki).

		## Demo

		Try our [interactive demo](http://cpettitt.github.com/project/dagre-d3/latest/demo/interactive-demo.html)!

		Or some of our other examples:

		* [Sentence Tokenization](http://cpettitt.github.com/project/dagre-d3/latest/demo/sentence-tokenization.html)
		* [TCP State Diagram](http://cpettitt.github.com/project/dagre-d3/latest/demo/tcp-state-diagram.html)
		* [TCP State Diagram](http://cpettitt.github.com/project/dagre-d3/latest/demo/tcp-state-diagram-json.html) using JSON as input.
		* [ETL Visualization](http://cpettitt.github.io/project/dagre-d3/latest/demo/etl-status.html)
		* [Style Attributes](http://cpettitt.github.io/project/dagre-d3/latest/demo/style-attrs.html)
		* [User-defined Node Shapes](http://cpettitt.github.io/project/dagre-d3/latest/demo/user-defined-nodes.html)
		* [Tooltip on Hover](http://cpettitt.github.io/project/dagre-d3/latest/demo/hover.html)

		These demos and more can be found in the `demo` folder of the project. Simply
		open them in your browser - there is no need to start a web server.

		## Getting dagre-d3

		### Browser Scripts

		You can get the latest browser-ready scripts:

		* [dagre-d3.js](http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js)
		* [dagre-d3.min.js](http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js)

		These scripts include everything you need to use dagre-d3. See Using Dagre
		below for details.

		### Bower

		We publish releases of dagre-d3 to bower. To get a list of the current releases
		available, use:

		$ bower info dagre-d3

		You can then install a version of dagre-d3 with this command:

		$ bower install dagre-d3#version

		### NPM Install

		Before installing this library you need to install the [npm package manager].

		To get dagre-d3 from npm, use:

		$ npm install dagre-d3

		### Build From Source

		Before building this library you need to install the [npm package manager].

		Check out this project and run this command from the root of the project:

		$ make

		This will generate `dagre-d3.js` and `dagre-d3.min.js` in the `dist` directory
		of the project.

		## Using dagre-d3

		To use dagre-d3, there are a few basic steps:

		1. Get the library
		2. Create a graph
		3. Render the graph
		4. Optionally configure the layout

		We'll walk through each of these steps below.

		### Getting dagre-d3

		First we need to load the dagre-d3 library. In an HTML page you do this by adding
		the following snippet:

		```html
		<script src="http://d3js.org/d3.v3.min.js"></script>
		<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
		```

		We recommend you use a specific version though, or include your own copy of the
		library, because the API may change across releases. Here's an example of using
		dagre-d3 vX.Y.Z, where vX.Y.Z is a version of dagre, such as v0.1.5 (see [Releases](https://github.com/cpettitt/dagre-d3/releases) for a list of releases):

		```html
		<script src="http://d3js.org/d3.v3.min.js"></script>
		<script src="http://cpettitt.github.io/project/dagre-d3/vX.Y.Z/dagre-d3.min.js"></script>
		```

		This will add a new global `dagreD3`. We show you how to use this below.

		### Creating a Graph

		We use [graphlib](https://github.com/cpettitt/graphlib) to create graphs in
		dagre, so its probably worth taking a look at its
		[API](http://cpettitt.github.io/project/graphlib/latest/doc/index.html).
		Graphlib comes bundled with dagre-d3. In this section, we'll show you how to
		create a simple graph.

		```js
		// Create a new directed graph
		var g = new dagreD3.Digraph();

		// Add nodes to the graph. The first argument is the node id. The second is
		// metadata about the node. In this case we're going to add labels to each of
		// our nodes.
		g.addNode("kspacey", { label: "Kevin Spacey" });
		g.addNode("swilliams", { label: "Saul Williams" });
		g.addNode("bpitt", { label: "Brad Pitt" });
		g.addNode("hford", { label: "Harrison Ford" });
		g.addNode("lwilson", { label: "Luke Wilson" });
		g.addNode("kbacon", { label: "Kevin Bacon" });

		// Add edges to the graph. The first argument is the edge id. Here we use null
		// to indicate that an arbitrary edge id can be assigned automatically. The
		// second argument is the source of the edge. The third argument is the target
		// of the edge. The last argument is the edge metadata.
		g.addEdge(null, "kspacey", "swilliams", { label: "K-PAX" });
		g.addEdge(null, "swilliams", "kbacon", { label: "These Vagabond Shoes" });
		g.addEdge(null, "bpitt", "kbacon", { label: "Sleepers" });
		g.addEdge(null, "hford", "lwilson", { label: "Anchorman 2" });
		g.addEdge(null, "lwilson", "kbacon", { label: "Telling Lies in America" });
		```

		This simple graph was derived from [The Oracle of
		Bacon](http://oracleofbacon.org/).

		### Embedding HTML in the SVG Graph
		If the label starts with an HTML tag, it is interpreted as HTML and is embeded as an foreignobject SVG element.
		But note that the IE does not support this SVG element.


		### Rendering the Graph

		To render the graph, we first need to create an SVG element on our page:

		```html
		<svg width=650 height=680>
		<g transform="translate(20,20)"/>
		</svg>
		```

		Then we ask the renderer to draw our graph in the SVG element:

		```js
		var renderer = new dagreD3.Renderer();
		renderer.run(g, d3.select("svg g"));
		```

		We also need to add some basic style information to get a usable graph. These values can be tweaked, of course.

		```css
		<style>
		svg {
		overflow: hidden;
		}

		.node rect {
		stroke: #333;
		stroke-width: 1.5px;
		fill: #fff;
		}

		.edgeLabel rect {
		fill: #fff;
		}

		.edgePath {
		stroke: #333;
		stroke-width: 1.5px;
		fill: none;
		}
		</style>
		```

		This produces the graph:

		![oracle-of-bacon1.png](http://cpettitt.github.io/project/dagre-d3/static/oracle-of-bacon1.png)

		### Configuring the Renderer

		This section describes experimental rendering configuration.

		* `renderer.edgeInterpolate(x)` sets the path interpolation used with d3. For a list of interpolation options, see the [D3 API](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate).
		* `renderer.edgeTension(x)` is used to set the tension for use with d3. See the [D3 API](https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_tension) for details.

		For example, to set the edge interpolation to 'linear':

		```js
		renderer.edgeInterpolate('linear');
		renderer.run(g, d3.select('svg g'));
		```

		Or for example, to disable drag and zoom:

		```js
		renderer.zoom(false);
		renderer.run(g, d3.select("svg g"));
		```

		### Configuring the Layout

		Here are a few methods you can call on the layout object to change layout behavior:

		* `debugLevel(x)` sets the level of logging verbosity to the number `x`. Currently 4 is th max.
		* `nodeSep(x)` sets the separation between adjacent nodes in the same rank to `x` pixels.
		* `edgeSep(x)` sets the separation between adjacent edges in the same rank to `x` pixels.
		* `rankSep(x)` sets the sepration between ranks in the layout to `x` pixels.
		* `rankDir(x)` sets the direction of the layout.
		* Defaults to `"TB"` for top-to-bottom layout
		* `"LR"` sets layout to left-to-right

		For example, to set node separation to 20 pixels and the rank direction to left-to-right:

		```js
		var layout = dagreD3.layout()
		.nodeSep(20)
		.rankDir("LR");
		renderer.layout(layout).run(g, d3.select("svg g"));
		```

		This produces the following graph:

		![oracle-of-bacon2.png](http://cpettitt.github.io/project/dagre-d3/static/oracle-of-bacon2.png)

		## License
		@@ -244,4 +17,1 @@
		for details.

		[npm package manager]: http://npmjs.org/
		[D3]: https://github.com/mbostock/d3

lib/Renderer.js

.jscsrc

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

dagre-d3 - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes