# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1552571800 -3600
# Node ID a2dd96c305bef21ef9a0ce380473f5318116d253
# Parent  9f3856337f55cc332182080943ec90ac08da53fa
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming

diff -r 9f3856337f55 -r a2dd96c305be client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 14:53:17 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 14:56:40 2019 +0100
@@ -181,6 +181,7 @@
       // axes
       mainChart
         .append("g")
+        .attr("class", "axis--x")
         .attr("transform", `translate(0, ${mainHeight})`)
         .call(xAxis)
         .selectAll(".tick text")
@@ -293,7 +294,11 @@
           let s = d3.event.selection || x2.range();
           x.domain(s.map(x2.invert, x2));
           mainChart.select(".line").attr("d", mainLineChart);
-          mainChart.select(".axis--x").call(xAxis);
+          mainChart
+            .select(".axis--x")
+            .call(xAxis)
+            .selectAll(".tick text")
+            .attr("y", 15);
           svg
             .select(".zoom")
             .call(
@@ -314,7 +319,11 @@
           let t = d3.event.transform;
           x.domain(t.rescaleX(x2).domain());
           mainChart.select(".line").attr("d", mainLineChart);
-          mainChart.select(".axis--x").call(xAxis);
+          mainChart
+            .select(".axis--x")
+            .call(xAxis)
+            .selectAll(".tick text")
+            .attr("y", 15);
           navChart
             .select(".brush")
             .call(brush.move, x.range().map(t.invertX, t));