Mercurial > gemma

comparison client/src/fairway/Fairwayprofile.vue @ 909:d612bc4dc3e9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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)