Prep v0.5.0 release

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "dagre-d3",
-  "version": "0.4.18",
+  "version": "0.5.0",
   "main": [
     "dist/dagre-d3.core.js"
   ],

dist/demo/arrows.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Arrows</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <style id="css">
@@ -52,9 +52,8 @@ <h1>Dagre D3 Demo: Arrows</h1>
     inner = svg.select("g");
 
 // Set up zoom support
-var zoom = d3.behavior.zoom().on("zoom", function() {
-      inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                  "scale(" + d3.event.scale + ")");
+var zoom = d3.zoom().on("zoom", function() {
+      inner.attr("transform", d3.event.transform);
     });
 svg.call(zoom);
 
@@ -66,10 +65,8 @@ <h1>Dagre D3 Demo: Arrows</h1>
 
 // Center the graph
 var initialScale = 0.75;
-zoom
-  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
-  .scale(initialScale)
-  .event(svg);
+svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
 svg.attr('height', g.graph().height * initialScale + 40);
 </script>
 

dist/demo/clusters.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Clusters</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <h1>Dagre D3 Demo: Clusters</h1>

dist/demo/dom.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: DOM Example</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <h1>Dagre D3 Demo: DOM Example</h1>

dist/demo/etl-status.html

@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <title>Dagre D3 Renderer Demo</title>
 
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <style>
@@ -195,9 +195,8 @@
   // Set up zoom support
   var svg = d3.select("svg"),
       inner = svg.select("g"),
-      zoom = d3.behavior.zoom().on("zoom", function() {
-        inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                    "scale(" + d3.event.scale + ")");
+      zoom = d3.zoom().on("zoom", function() {
+        inner.attr("transform", d3.event.transform);
       });
   svg.call(zoom);
 
@@ -251,10 +250,10 @@
     var width = parseInt(svg.style("width").replace(/px/, ""));
     var height = parseInt(svg.style("height").replace(/px/, ""));
     var zoomScale = Math.min(width / graphWidth, height / graphHeight);
-    var translate = [(width/2) - ((graphWidth*zoomScale)/2), (height/2) - ((graphHeight*zoomScale)/2)];
-    zoom.translate(translate);
-    zoom.scale(zoomScale);
-    zoom.event(isUpdate ? svg.transition().duration(500) : d3.select("svg"));
+    var translateX = (width / 2) - ((graphWidth * zoomScale) / 2)
+    var translateY = (height / 2) - ((graphHeight * zoomScale) / 2);
+    var svgZoom = isUpdate ? svg.transition().duration(500) : svg;
+    svgZoom.call(zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(zoomScale));
   }
 
   // Do some mock queue status updates
@@ -280,5 +279,8 @@
     }
   }, 5000);
 
-  draw();
+  // Initial draw, once the DOM is ready
+  document.addEventListener("DOMContentLoaded", draw);
 </script>
+</body>
+</html>

dist/demo/graph-story-board.html

@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <title>Graph Storyboard. Add and Prune Dependencies Algorithm</title>
 
-<script src="http://d3js.org/d3.v3.js"></script>
+<script src="http://d3js.org/d3.v4.js"></script>
 <script src="../dagre-d3.js"></script>
 
 <style id="css">
@@ -116,9 +116,8 @@
 	}
 	this.svg = d3.select(svgelement);
   this.inner = this.svg.append("g");
-	this.svg.call(d3.behavior.zoom().on("zoom", (function() {
-		this.inner.attr("transform", "translate(" + d3.event.translate + ")" +
-		                                 "scale(" + d3.event.scale + ")")
+	this.svg.call(d3.zoom().on("zoom", (function() {
+		this.inner.attr("transform", d3.event.transform)
   }).bind(this)));
 
 	this.t = 0;
@@ -144,12 +143,12 @@
 					break;
 				case 'AddCoherenceEdge':
 					this.g.setEdge(x[1], x[2], {
-						lineInterpolate: 'basis' 
+						lineInterpolate: d3.curveBasis 
 					});
 					break;
 				case 'AddDependencyEdge':
 					this.g.setEdge(x[1], x[2], {
-						lineInterpolate: 'basis'
+						lineInterpolate: d3.curveBasis
 						,label: 'added'
 						,labeloffset: 5
 						,labelpos: 'l'
@@ -158,7 +157,7 @@
 				case 'MakeRedundantEdge':
 					this.g.setEdge(x[1], x[2], {
 						style: "stroke: #aaa;   stroke-dasharray: 5, 10;" 
-						,lineInterpolate: 'basis'
+						,lineInterpolate: d3.curveBasis
 						,arrowheadStyle: "fill: #aaa"
 						,labelpos: 'c'
 						,label: 'pruned'

dist/demo/hover.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Tooltip on Hover</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <!-- Pull in JQuery dependencies -->
@@ -167,10 +167,10 @@ <h1>Dagre D3 Demo: Tooltip on Hover</h1>
     inner = svg.append("g");
 
 // Set up zoom support
-var zoom = d3.behavior.zoom().on("zoom", function() {
-    inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                "scale(" + d3.event.scale + ")");
-  });
+var zoom = d3.zoom()
+    .on("zoom", function() {
+      inner.attr("transform", d3.event.transform);
+    });
 svg.call(zoom);
 
 // Simple function to style the tooltip for the given node.
@@ -187,10 +187,8 @@ <h1>Dagre D3 Demo: Tooltip on Hover</h1>
 
 // Center the graph
 var initialScale = 0.75;
-zoom
-  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
-  .scale(initialScale)
-  .event(svg);
+svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
 svg.attr('height', g.graph().height * initialScale + 40);
 </script>
 

dist/demo/interactive-demo.html

@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <title>Dagre Interactive Demo</title>
 
-<script src="http://d3js.org/d3.v3.js"></script>
+<script src="http://d3js.org/d3.v4.js"></script>
 <script src="http://cpettitt.github.io/project/graphlib-dot/v0.5.2/graphlib-dot.js"></script>
 <script src="../dagre-d3.js"></script>
 
@@ -131,17 +131,16 @@ <h2>Graph Visualization</h2>
 // Set up zoom support
 var svg = d3.select("svg"),
     inner = d3.select("svg g"),
-    zoom = d3.behavior.zoom().on("zoom", function() {
-      inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                  "scale(" + d3.event.scale + ")");
+    zoom = d3.zoom().on("zoom", function() {
+      inner.attr("transform", d3.event.transform);
     });
 svg.call(zoom);
 
 // Create and configure the renderer
 var render = dagreD3.render();
 
-function tryDraw() {
   var g;
+function tryDraw() {
   if (oldInputGraphValue !== inputGraph.value) {
     inputGraph.setAttribute("class", "");
     oldInputGraphValue = inputGraph.value;

dist/demo/sentence-tokenization.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Sentence Tokenization</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <h1>Dagre D3 Demo: Sentence Tokenization</h1>

dist/demo/shapes.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Shapes</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <style id="css">
@@ -49,9 +49,8 @@ <h1>Dagre D3 Demo: Shapes</h1>
     inner = svg.select("g");
 
 // Set up zoom support
-var zoom = d3.behavior.zoom().on("zoom", function() {
-      inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                  "scale(" + d3.event.scale + ")");
+var zoom = d3.zoom().on("zoom", function() {
+      inner.attr("transform", d3.event.transform);
     });
 svg.call(zoom);
 
@@ -63,10 +62,8 @@ <h1>Dagre D3 Demo: Shapes</h1>
 
 // Center the graph
 var initialScale = 0.75;
-zoom
-  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
-  .scale(initialScale)
-  .event(svg);
+svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
 svg.attr('height', g.graph().height * initialScale + 40);
 </script>
 

dist/demo/style-attrs.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: Style Attributes</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <h1>Dagre D3 Demo: Style Attributes</h1>
@@ -76,7 +76,7 @@ <h1>Dagre D3 Demo: Style Attributes</h1>
 // see available options for lineInterpolate here: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
 g.setEdge("A", "D", {
   label: "line interpolation different",
-  lineInterpolate: 'basis' 
+  lineInterpolate: d3.curveBasis 
 });
 
 g.setEdge("E", "D", {});

dist/demo/svg-labels.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: SVG Labels</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <h1>Dagre D3 Demo: SVG Labels</h1>

dist/demo/tcp-state-diagram.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: TCP State Diagram</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <style id="css">
@@ -81,9 +81,8 @@ <h1>Dagre D3 Demo: TCP State Diagram</h1>
     inner = svg.select("g");
 
 // Set up zoom support
-var zoom = d3.behavior.zoom().on("zoom", function() {
-      inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                  "scale(" + d3.event.scale + ")");
+var zoom = d3.zoom().on("zoom", function() {
+      inner.attr("transform", d3.event.transform);
     });
 svg.call(zoom);
 
@@ -95,10 +94,8 @@ <h1>Dagre D3 Demo: TCP State Diagram</h1>
 
 // Center the graph
 var initialScale = 0.75;
-zoom
-  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
-  .scale(initialScale)
-  .event(svg);
+svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
 svg.attr('height', g.graph().height * initialScale + 40);
 </script>
 

dist/demo/user-defined.html

@@ -4,7 +4,7 @@
 <title>Dagre D3 Demo: User-defined Shapes and Arrows</title>
 
 <link rel="stylesheet" href="demo.css">
-<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <script src="../dagre-d3.js"></script>
 
 <style id="css">
@@ -48,9 +48,8 @@ <h1>Dagre D3 Demo: User-defined Shapes and Arrows</h1>
     inner = svg.select("g");
 
 // Set up zoom support
-var zoom = d3.behavior.zoom().on("zoom", function() {
-    inner.attr("transform", "translate(" + d3.event.translate + ")" +
-                                "scale(" + d3.event.scale + ")");
+var zoom = d3.zoom().on("zoom", function() {
+    inner.attr("transform", d3.event.transform);
   });
 svg.call(zoom);
 
@@ -105,10 +104,8 @@ <h1>Dagre D3 Demo: User-defined Shapes and Arrows</h1>
 
 // Center the graph
 var initialScale = 0.75;
-zoom
-  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
-  .scale(initialScale)
-  .event(svg);
+svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
+
 svg.attr('height', g.graph().height * initialScale + 40);
 </script>
 

lib/version.js

@@ -1 +1 @@
-module.exports = "0.4.18";
+module.exports = "0.5.0";