Skip to content

Commit 4255a0f

Browse files
cpettittcpettitt
committed
Prep v0.5.0 release
1 parent 862e64a commit 4255a0f

23 files changed

+379
-121
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dagre-d3",
3-
"version": "0.4.18",
3+
"version": "0.5.0",
44
"main": [
55
"dist/dagre-d3.core.js"
66
],

‎dist/dagre-d3.core.js

+24-17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dagre-d3.core.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dagre-d3.core.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dagre-d3.js

+24-17
Large diffs are not rendered by default.

‎dist/dagre-d3.min.js

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/dagre-d3.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo/arrows.html

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Arrows</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<style id="css">
@@ -52,9 +52,8 @@ <h1>Dagre D3 Demo: Arrows</h1>
5252
inner = svg.select("g");
5353

5454
// Set up zoom support
55-
var zoom = d3.behavior.zoom().on("zoom", function() {
56-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
57-
"scale(" + d3.event.scale + ")");
55+
var zoom = d3.zoom().on("zoom", function() {
56+
inner.attr("transform", d3.event.transform);
5857
});
5958
svg.call(zoom);
6059

@@ -66,10 +65,8 @@ <h1>Dagre D3 Demo: Arrows</h1>
6665

6766
// Center the graph
6867
var initialScale = 0.75;
69-
zoom
70-
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
71-
.scale(initialScale)
72-
.event(svg);
68+
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
69+
7370
svg.attr('height', g.graph().height * initialScale + 40);
7471
</script>
7572

‎dist/demo/clusters.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Clusters</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<h1>Dagre D3 Demo: Clusters</h1>

‎dist/demo/dom.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: DOM Example</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<h1>Dagre D3 Demo: DOM Example</h1>

‎dist/demo/etl-status.html

+11-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<meta charset="utf-8">
44
<title>Dagre D3 Renderer Demo</title>
55

6-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
6+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
77
<script src="../dagre-d3.js"></script>
88

99
<style>
@@ -195,9 +195,8 @@
195195
// Set up zoom support
196196
var svg = d3.select("svg"),
197197
inner = svg.select("g"),
198-
zoom = d3.behavior.zoom().on("zoom", function() {
199-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
200-
"scale(" + d3.event.scale + ")");
198+
zoom = d3.zoom().on("zoom", function() {
199+
inner.attr("transform", d3.event.transform);
201200
});
202201
svg.call(zoom);
203202

@@ -251,10 +250,10 @@
251250
var width = parseInt(svg.style("width").replace(/px/, ""));
252251
var height = parseInt(svg.style("height").replace(/px/, ""));
253252
var zoomScale = Math.min(width / graphWidth, height / graphHeight);
254-
var translate = [(width/2) - ((graphWidth*zoomScale)/2), (height/2) - ((graphHeight*zoomScale)/2)];
255-
zoom.translate(translate);
256-
zoom.scale(zoomScale);
257-
zoom.event(isUpdate ? svg.transition().duration(500) : d3.select("svg"));
253+
var translateX = (width / 2) - ((graphWidth * zoomScale) / 2)
254+
var translateY = (height / 2) - ((graphHeight * zoomScale) / 2);
255+
var svgZoom = isUpdate ? svg.transition().duration(500) : svg;
256+
svgZoom.call(zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(zoomScale));
258257
}
259258

260259
// Do some mock queue status updates
@@ -280,5 +279,8 @@
280279
}
281280
}, 5000);
282281

283-
draw();
282+
// Initial draw, once the DOM is ready
283+
document.addEventListener("DOMContentLoaded", draw);
284284
</script>
285+
</body>
286+
</html>

‎dist/demo/graph-story-board.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<meta charset="utf-8">
44
<title>Graph Storyboard. Add and Prune Dependencies Algorithm</title>
55

6-
<script src="http://d3js.org/d3.v3.js"></script>
6+
<script src="http://d3js.org/d3.v4.js"></script>
77
<script src="../dagre-d3.js"></script>
88

99
<style id="css">
@@ -116,9 +116,8 @@
116116
}
117117
this.svg = d3.select(svgelement);
118118
this.inner = this.svg.append("g");
119-
this.svg.call(d3.behavior.zoom().on("zoom", (function() {
120-
this.inner.attr("transform", "translate(" + d3.event.translate + ")" +
121-
"scale(" + d3.event.scale + ")")
119+
this.svg.call(d3.zoom().on("zoom", (function() {
120+
this.inner.attr("transform", d3.event.transform)
122121
}).bind(this)));
123122

124123
this.t = 0;
@@ -144,12 +143,12 @@
144143
break;
145144
case 'AddCoherenceEdge':
146145
this.g.setEdge(x[1], x[2], {
147-
lineInterpolate: 'basis'
146+
lineInterpolate: d3.curveBasis
148147
});
149148
break;
150149
case 'AddDependencyEdge':
151150
this.g.setEdge(x[1], x[2], {
152-
lineInterpolate: 'basis'
151+
lineInterpolate: d3.curveBasis
153152
,label: 'added'
154153
,labeloffset: 5
155154
,labelpos: 'l'
@@ -158,7 +157,7 @@
158157
case 'MakeRedundantEdge':
159158
this.g.setEdge(x[1], x[2], {
160159
style: "stroke: #aaa; stroke-dasharray: 5, 10;"
161-
,lineInterpolate: 'basis'
160+
,lineInterpolate: d3.curveBasis
162161
,arrowheadStyle: "fill: #aaa"
163162
,labelpos: 'c'
164163
,label: 'pruned'

‎dist/demo/hover.html

+7-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Tooltip on Hover</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<!-- Pull in JQuery dependencies -->
@@ -167,10 +167,10 @@ <h1>Dagre D3 Demo: Tooltip on Hover</h1>
167167
inner = svg.append("g");
168168

169169
// Set up zoom support
170-
var zoom = d3.behavior.zoom().on("zoom", function() {
171-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
172-
"scale(" + d3.event.scale + ")");
173-
});
170+
var zoom = d3.zoom()
171+
.on("zoom", function() {
172+
inner.attr("transform", d3.event.transform);
173+
});
174174
svg.call(zoom);
175175

176176
// Simple function to style the tooltip for the given node.
@@ -187,10 +187,8 @@ <h1>Dagre D3 Demo: Tooltip on Hover</h1>
187187

188188
// Center the graph
189189
var initialScale = 0.75;
190-
zoom
191-
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
192-
.scale(initialScale)
193-
.event(svg);
190+
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
191+
194192
svg.attr('height', g.graph().height * initialScale + 40);
195193
</script>
196194

‎dist/demo/interactive-demo.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<meta charset="utf-8">
44
<title>Dagre Interactive Demo</title>
55

6-
<script src="http://d3js.org/d3.v3.js"></script>
6+
<script src="http://d3js.org/d3.v4.js"></script>
77
<script src="http://cpettitt.github.io/project/graphlib-dot/v0.5.2/graphlib-dot.js"></script>
88
<script src="../dagre-d3.js"></script>
99

@@ -131,17 +131,16 @@ <h2>Graph Visualization</h2>
131131
// Set up zoom support
132132
var svg = d3.select("svg"),
133133
inner = d3.select("svg g"),
134-
zoom = d3.behavior.zoom().on("zoom", function() {
135-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
136-
"scale(" + d3.event.scale + ")");
134+
zoom = d3.zoom().on("zoom", function() {
135+
inner.attr("transform", d3.event.transform);
137136
});
138137
svg.call(zoom);
139138

140139
// Create and configure the renderer
141140
var render = dagreD3.render();
142141

143-
function tryDraw() {
144142
var g;
143+
function tryDraw() {
145144
if (oldInputGraphValue !== inputGraph.value) {
146145
inputGraph.setAttribute("class", "");
147146
oldInputGraphValue = inputGraph.value;

‎dist/demo/sentence-tokenization.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Sentence Tokenization</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<h1>Dagre D3 Demo: Sentence Tokenization</h1>

‎dist/demo/shapes.html

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Shapes</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<style id="css">
@@ -49,9 +49,8 @@ <h1>Dagre D3 Demo: Shapes</h1>
4949
inner = svg.select("g");
5050

5151
// Set up zoom support
52-
var zoom = d3.behavior.zoom().on("zoom", function() {
53-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
54-
"scale(" + d3.event.scale + ")");
52+
var zoom = d3.zoom().on("zoom", function() {
53+
inner.attr("transform", d3.event.transform);
5554
});
5655
svg.call(zoom);
5756

@@ -63,10 +62,8 @@ <h1>Dagre D3 Demo: Shapes</h1>
6362

6463
// Center the graph
6564
var initialScale = 0.75;
66-
zoom
67-
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
68-
.scale(initialScale)
69-
.event(svg);
65+
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
66+
7067
svg.attr('height', g.graph().height * initialScale + 40);
7168
</script>
7269

‎dist/demo/style-attrs.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: Style Attributes</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<h1>Dagre D3 Demo: Style Attributes</h1>
@@ -76,7 +76,7 @@ <h1>Dagre D3 Demo: Style Attributes</h1>
7676
// see available options for lineInterpolate here: https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate
7777
g.setEdge("A", "D", {
7878
label: "line interpolation different",
79-
lineInterpolate: 'basis'
79+
lineInterpolate: d3.curveBasis
8080
});
8181

8282
g.setEdge("E", "D", {});

‎dist/demo/svg-labels.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: SVG Labels</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<h1>Dagre D3 Demo: SVG Labels</h1>

‎dist/demo/tcp-state-diagram.html

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: TCP State Diagram</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<style id="css">
@@ -81,9 +81,8 @@ <h1>Dagre D3 Demo: TCP State Diagram</h1>
8181
inner = svg.select("g");
8282

8383
// Set up zoom support
84-
var zoom = d3.behavior.zoom().on("zoom", function() {
85-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
86-
"scale(" + d3.event.scale + ")");
84+
var zoom = d3.zoom().on("zoom", function() {
85+
inner.attr("transform", d3.event.transform);
8786
});
8887
svg.call(zoom);
8988

@@ -95,10 +94,8 @@ <h1>Dagre D3 Demo: TCP State Diagram</h1>
9594

9695
// Center the graph
9796
var initialScale = 0.75;
98-
zoom
99-
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
100-
.scale(initialScale)
101-
.event(svg);
97+
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
98+
10299
svg.attr('height', g.graph().height * initialScale + 40);
103100
</script>
104101

‎dist/demo/user-defined.html

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Dagre D3 Demo: User-defined Shapes and Arrows</title>
55

66
<link rel="stylesheet" href="demo.css">
7-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
7+
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
88
<script src="../dagre-d3.js"></script>
99

1010
<style id="css">
@@ -48,9 +48,8 @@ <h1>Dagre D3 Demo: User-defined Shapes and Arrows</h1>
4848
inner = svg.select("g");
4949

5050
// Set up zoom support
51-
var zoom = d3.behavior.zoom().on("zoom", function() {
52-
inner.attr("transform", "translate(" + d3.event.translate + ")" +
53-
"scale(" + d3.event.scale + ")");
51+
var zoom = d3.zoom().on("zoom", function() {
52+
inner.attr("transform", d3.event.transform);
5453
});
5554
svg.call(zoom);
5655

@@ -105,10 +104,8 @@ <h1>Dagre D3 Demo: User-defined Shapes and Arrows</h1>
105104

106105
// Center the graph
107106
var initialScale = 0.75;
108-
zoom
109-
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
110-
.scale(initialScale)
111-
.event(svg);
107+
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
108+
112109
svg.attr('height', g.graph().height * initialScale + 40);
113110
</script>
114111

‎lib/version.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = "0.4.18";
1+
module.exports = "0.5.0";

0 commit comments

Comments
 (0)