Mercurial > gemma
changeset 2652:a2dd96c305be
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));