# HG changeset patch # User Chloe Laisne # Date 1474735160 -7200 # Node ID 4e199fd2968990a32741422e6fca5f5224bd4b56 # Parent 57762c0b601e2187c77c9551ad788618014f75e2 Fix treemap transition diff -r 57762c0b601e -r 4e199fd29689 cms/app-client/app/components/visu-langues.js --- 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"); diff -r 57762c0b601e -r 4e199fd29689 cms/app-client/app/styles/tabs/langues.scss --- 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 {