Merge 536ad5e into f04d729

TargetProcess · Jul 17, 2019 · 43f3303 · 43f3303
2 parents f04d729 + 536ad5e
commit 43f3303
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## next release
+- fix blinking and shaking of axis labels during re-renders of chart [#580](https://github.com/TargetProcess/tauCharts/pull/580)
 ## 2.7.3 (may 31, 2019)
 - preserve padding values during auto layout, even if user has hidden x or y guide ([@rDr4g0n](https://github.com/rDr4g0n) in [#575](https://github.com/TargetProcess/tauCharts/pull/575))
 ## 2.7.2 (april 22, 2019)

diff --git a/src/elements/coords.cartesian.axis.ts b/src/elements/coords.cartesian.axis.ts
@@ -525,15 +525,13 @@ function createAxis(config: AxisConfig) {
                     return label;
                 })
                 .then((label) => {
-
                     const ly = (kh * guide.padding);
                     const size = Math.abs(range1 - range0);
                     const lx = isHorizontal ? size : 0;
 
                     label
                         .attr('x', lx)
-                        .attr('y', ly)
-                        .attr('text-anchor', 'end');
+                        .attr('y', ly);
                 });
 
             const delimiter = ' \u2192 ';
@@ -542,15 +540,31 @@ function createAxis(config: AxisConfig) {
                 textParts.splice(i, 0, delimiter);
             }
 
-            const tspans = labelTextNode.selectAll('tspan')
+            let tspans = labelTextNode.selectAll('tspan')
                 .data(textParts)
                 .enter()
                 .append('tspan')
+                .attr('opacity', epsilon)
                 .attr('class', (d, i) => i % 2 ?
                     (`label-token-delimiter label-token-delimiter-${i}`) :
                     (`label-token label-token-${i}`))
-                .text((d) => d)
-                .exit()
+                .text((d) => d);
+
+            let tspansExit = tspans
+                .exit();
+
+            if (transition) {
+                tspans = tspans
+                    .transition(transition);
+
+                tspansExit = tspansExit
+                    .transition(transition)
+                    .attr('opacity', epsilon);
+            }
+
+            tspans.attr('opacity', 1);
+
+            tspansExit
                 .remove();
         }
 
@@ -562,7 +576,7 @@ function createAxis(config: AxisConfig) {
         if (!scaleGuide.facetAxis) {
             drawLines(ticks);
         }
-        if (isOrdinalScale && gridOnly) { // Todo: Explicitly determine if grid 
+        if (isOrdinalScale && gridOnly) { // Todo: Explicitly determine if grid
             drawExtraOrdinalLine();
         }
         if (!gridOnly) {

diff --git a/src/spec-transform-auto-layout.ts b/src/spec-transform-auto-layout.ts
@@ -107,14 +107,19 @@ var applyNodeDefaults = (node: Unit) => {
     node.guide = node.guide || {};
     node.guide.padding = utils.defaults(node.guide.padding || {}, {l: 0, b: 0, r: 0, t: 0});
 
-    node.guide.x = extendLabel(node.guide, 'x');
+    node.guide.x = extendLabel(node.guide, 'x', {
+        textAnchor: 'end'
+    });
     node.guide.x = extendAxis(node.guide, 'x', {
         cssClass: 'x axis',
         scaleOrient: 'bottom',
         textAnchor: 'middle'
     });
 
-    node.guide.y = extendLabel(node.guide, 'y', {rotate: -90});
+    node.guide.y = extendLabel(node.guide, 'y', {
+        rotate: -90,
+        textAnchor: 'end',
+    });
     node.guide.y = extendAxis(node.guide, 'y', {
         cssClass: 'y axis',
         scaleOrient: 'left',