Mercurial > gemma

changeset 2652:a2dd96c305be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 14:56:40 +0100
parents 9f3856337f55
children 7fd47d9641ac
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 11 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- 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));