Mercurial > gemma
comparison client/src/fairway/Fairwayprofile.vue @ 909:d612bc4dc3e9
profile redrawn
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 17:40:22 +0200 |
parents | fb39ec3b95a8 |
children | d2f30a784fb3 |
comparison
equal
deleted
inserted
replaced
908:21ab63347a6c | 909:d612bc4dc3e9 |
---|---|
108 width | 108 width |
109 }); | 109 }); |
110 this.drawProfile({ | 110 this.drawProfile({ |
111 graph, | 111 graph, |
112 xScale, | 112 xScale, |
113 yScaleLeft, | 113 yScaleRight, |
114 currentData, | 114 currentData, |
115 height, | 115 height, |
116 width | 116 width |
117 }); | 117 }); |
118 this.drawLabels({ | 118 this.drawLabels({ |
155 } | 155 } |
156 }, | 156 }, |
157 drawLabels({ graph, height }) { | 157 drawLabels({ graph, height }) { |
158 graph | 158 graph |
159 .append("text") | 159 .append("text") |
160 .attr("transform", "rotate(-90)") | |
161 .attr("y", 0 - this.margin.left) | |
162 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) | |
163 .attr("dy", "1em") | |
164 .attr("fill", "black") | |
165 .style("text-anchor", "middle") | |
166 .text("Height above Adria [m]"); | |
167 graph | |
168 .append("text") | |
169 .attr("transform", ["rotate(-90)"]) | 160 .attr("transform", ["rotate(-90)"]) |
170 .attr("y", this.width - 60) | 161 .attr("y", this.width - 60) |
171 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) | 162 .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) |
172 .attr("dy", "1em") | 163 .attr("dy", "1em") |
173 .attr("fill", "black") | 164 .attr("fill", "black") |
202 .scaleLinear() | 193 .scaleLinear() |
203 .domain(this.yScaleRight) | 194 .domain(this.yScaleRight) |
204 .rangeRound([height, 0]); | 195 .rangeRound([height, 0]); |
205 | 196 |
206 let xAxis = d3.axisBottom(xScale); | 197 let xAxis = d3.axisBottom(xScale); |
207 let yAxis = d3.axisLeft(yScaleLeft); | |
208 let yAxis2 = d3.axisRight(yScaleRight); | 198 let yAxis2 = d3.axisRight(yScaleRight); |
209 let graph = svg | 199 let graph = svg |
210 .append("g") | 200 .append("g") |
211 .attr( | 201 .attr( |
212 "transform", | 202 "transform", |
214 ); | 204 ); |
215 graph | 205 graph |
216 .append("g") | 206 .append("g") |
217 .attr("transform", "translate(0," + height + ")") | 207 .attr("transform", "translate(0," + height + ")") |
218 .call(xAxis.ticks(5)); | 208 .call(xAxis.ticks(5)); |
219 graph.append("g").call(yAxis); | |
220 graph | 209 graph |
221 .append("g") | 210 .append("g") |
222 .attr("transform", "translate(" + width + ",0)") | 211 .attr("transform", "translate(" + width + ",0)") |
223 .call(yAxis2); | 212 .call(yAxis2); |
224 return { xScale, yScaleLeft, yScaleRight, graph }; | 213 return { xScale, yScaleLeft, yScaleRight, graph }; |
238 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) | 227 .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) |
239 .attr("fill", this.waterColor) | 228 .attr("fill", this.waterColor) |
240 .attr("stroke", this.waterColor) | 229 .attr("stroke", this.waterColor) |
241 .attr("d", waterArea); | 230 .attr("d", waterArea); |
242 }, | 231 }, |
243 drawProfile({ graph, xScale, yScaleLeft, currentData, height }) { | 232 drawProfile({ graph, xScale, yScaleRight, currentData, height }) { |
244 for (let part of currentData) { | 233 for (let part of currentData) { |
245 let profileLine = d3 | 234 let profileLine = d3 |
246 .line() | 235 .line() |
247 .x(d => { | 236 .x(d => { |
248 return xScale(d.x); | 237 return xScale(d.x); |
249 }) | 238 }) |
250 .y(d => { | 239 .y(d => { |
251 return yScaleLeft(d.y); | 240 return yScaleRight(-d.y); |
252 }); | 241 }); |
253 let profileArea = d3 | 242 let profileArea = d3 |
254 .area() | 243 .area() |
255 .x(function(d) { | 244 .x(function(d) { |
256 return xScale(d.x); | 245 return xScale(d.x); |
257 }) | 246 }) |
258 .y0(height) | 247 .y0(height) |
259 .y1(function(d) { | 248 .y1(function(d) { |
260 return yScaleLeft(d.y); | 249 return yScaleRight(-d.y); |
261 }); | 250 }); |
262 graph | 251 graph |
263 .append("path") | 252 .append("path") |
264 .datum(part) | 253 .datum(part) |
265 .attr("fill", GROUND_COLOR) | 254 .attr("fill", GROUND_COLOR) |