Mercurial Mercurial > corpus_parole / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fix treemap transition
authorChloe Laisne <chloe.laisne@gmail.com>
Sat, 24 Sep 2016 18:39:20 +0200
changeset 287 4e199fd29689
parent 286 57762c0b601e
child 288 f2b77873a156
Fix treemap transition
cms/app-client/app/components/visu-langues.js file | annotate | diff | comparison | revisions
cms/app-client/app/styles/tabs/langues.scss file | annotate | diff | comparison | revisions 
--- a/cms/app-client/app/components/visu-langues.js	Fri Sep 23 21:44:56 2016 +0200
+++ b/cms/app-client/app/components/visu-langues.js	Sat Sep 24 18:39:20 2016 +0200
@@ -102,6 +102,13 @@
                 }
             }
 
+            function position() {
+                return this.style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; })
+                    .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; })
+                    .style("left", function(d) { return x(d.x) + 'px'; })
+                    .style("top", function(d) { return y(d.y) + 'px'; });
+            }
+
             function display(d) {
                 breadcrumbs
                     .datum(d.parent)
@@ -118,10 +125,7 @@
                     .append("div");
 
                 node.attr("class", "node")
-                    .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; })
-                    .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; })
-                    .style("left", function(d) { return d.x + 'px'; })
-                    .style("top", function(d) { return d.y + 'px'; })
+                    .call(position)
                     .on("click", selectHandler);
 
                 node.filter(function(d) { return d._children; })
@@ -139,32 +143,24 @@
                     selectHandler(d);
                     transitioning = true;
 
-                    var newNodes = display(d),
-                    transitionNodes = nodes.transition().duration(750),
-                    transitionNewNodes = newNodes.transition().duration(750);
+                    var newNode = display(d),
+                    transitionNodes = node.transition().duration(750),
+                    transitionNewNodes = newNode.transition().duration(750);
 
                     x.domain([d.x, d.x + d.dx]);
                     y.domain([d.y, d.y + d.dy]);
 
                     element.style("shape-rendering", null);
 
-                    element.selectAll(".nodes").sort(function(a, b) { return a.depth - b.depth; });
+                    element.selectAll(".node").sort(function(a, b) { return a.depth - b.depth; });
 
-                    newNodes.selectAll("text").style("fill-opacity", 0);
+                    newNode.selectAll().style("fill-opacity", 0);
 
-                    transitionNodes.style("fill-opacity", 0)
-                        .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; })
-                        .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; })
-                        .style("left", function(d) { return x(d.x) + 'px'; })
-                        .style("top", function(d) { return y(d.y) + 'px'; })
-                        .attr("fill", function(d) { return (d.color || "#bbb"); });
+                    transitionNodes.style("opacity", 0)
+                        .call(position);
 
-                    transitionNewNodes.style("fill-opacity", 1)
-                        .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; })
-                        .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; })
-                        .style("left", function(d) { return x(d.x) + 'px'; })
-                        .style("top", function(d) { return y(d.y) + 'px'; })
-                        .attr("fill", function(d) { return (d.color || "#bbb"); });
+                    transitionNewNodes.style("opacity", 1)
+                        .call(position);
 
                     transitionNodes.remove().each("end", function() {
                         element.style("shape-rendering", "crispEdges");
--- a/cms/app-client/app/styles/tabs/langues.scss	Fri Sep 23 21:44:56 2016 +0200
+++ b/cms/app-client/app/styles/tabs/langues.scss	Sat Sep 24 18:39:20 2016 +0200
@@ -41,7 +41,7 @@
 #tabs-langues .nodes {
 	width: inherit;
 	height: inherit;
-	position: relative;
+	position: absolute;
 }
 
 #tabs-langues .node {
corpus_parole