Skip to content

Commit

Permalink
Update to D3.js v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutzroeder
lutzroeder committed Dec 27, 2017
1 parent f7b6155 commit ebbb84f
Show file tree
Hide file tree
Showing 25 changed files with 82 additions and 89 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Expand Up @@ -23,7 +23,7 @@
"test/**"
],
"dependencies": {
"d3": "^3.3.8",
"d3": "^4.12.2",
"dagre": "^0.7.3",
"graphlib": "^1.0.5",
"lodash": "^3.10.0"
Expand Down
13 changes: 5 additions & 8 deletions demo/arrows.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style id="css">
Expand Down Expand Up @@ -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);

Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion demo/clusters.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<h1>Dagre D3 Demo: Clusters</h1>
Expand Down
2 changes: 1 addition & 1 deletion demo/dom.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<h1>Dagre D3 Demo: DOM Example</h1>
Expand Down
20 changes: 11 additions & 9 deletions demo/etl-status.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style>
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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
Expand All @@ -280,5 +279,8 @@
}
}, 5000);

draw();
// Initial draw, once the DOM is ready
document.addEventListener("DOMContentLoaded", draw);
</script>
</body>
</html>
13 changes: 6 additions & 7 deletions demo/graph-story-board.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style id="css">
Expand Down Expand Up @@ -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;
Expand All @@ -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'
Expand All @@ -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'
Expand Down
16 changes: 7 additions & 9 deletions demo/hover.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<!-- Pull in JQuery dependencies -->
Expand Down Expand Up @@ -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.
Expand All @@ -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>

Expand Down
9 changes: 4 additions & 5 deletions demo/interactive-demo.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion demo/sentence-tokenization.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<h1>Dagre D3 Demo: Sentence Tokenization</h1>
Expand Down
13 changes: 5 additions & 8 deletions demo/shapes.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style id="css">
Expand Down Expand Up @@ -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);

Expand All @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions demo/style-attrs.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<h1>Dagre D3 Demo: Style Attributes</h1>
Expand Down Expand Up @@ -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", {});
Expand Down
2 changes: 1 addition & 1 deletion demo/svg-labels.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<h1>Dagre D3 Demo: SVG Labels</h1>
Expand Down
13 changes: 5 additions & 8 deletions demo/tcp-state-diagram.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style id="css">
Expand Down Expand Up @@ -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);

Expand All @@ -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>

Expand Down
13 changes: 5 additions & 8 deletions demo/user-defined.html
View file
Expand Up @@ -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="../build/dist/dagre-d3.js"></script>

<style id="css">
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Expand Up @@ -140,7 +140,7 @@ function karmaSingleRun(conf, cb) {
function makeJsBundleTask(watch) {
return makeBundleTask("./index.js", "dagre-d3.js", watch, {
standalone: "dagreD3",
external: ["node_modules/d3/index.js", "node_modules/d3/d3.js"],
external: ["node_modules/d3/index.js", "node_modules/d3/build/d3.js"],
debug: true
});
}
Expand Down
2 changes: 1 addition & 1 deletion karma.conf.js
View file
Expand Up @@ -18,7 +18,7 @@ module.exports = function(config) {
{ pattern: 'test/*.css', included: false },

'node_modules/lodash/index.js',
'node_modules/d3/d3.js',
'node_modules/d3/build/d3.js',
'build/dist/dagre-d3.js',

'node_modules/chai/chai.js',
Expand Down
2 changes: 1 addition & 1 deletion karma.core.conf.js
View file
Expand Up @@ -18,7 +18,7 @@ module.exports = function(config) {
{ pattern: 'test/*.css', included: false },

'node_modules/lodash/index.js',
'node_modules/d3/d3.js',
'node_modules/d3/build/d3.js',
'node_modules/graphlib/dist/graphlib.core.js',
'node_modules/dagre/dist/dagre.core.js',
'build/dist/dagre-d3.core.js',
Expand Down
2 changes: 2 additions & 0 deletions lib/create-clusters.js
View file
Expand Up @@ -17,6 +17,8 @@ function createClusters(selection, g) {
return node.id;
})
.style("opacity", 0);

svgClusters = selection.selectAll("g.cluster");

util.applyTransition(svgClusters, g)
.style("opacity", 1);
Expand Down

0 comments on commit ebbb84f

Please sign in to comment.