Mercurial > gemma
changeset 803:30ff051e75e9
Fairway profile WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 14:00:50 +0200 |
parents | 327aa4a18a1c |
children | 21609ba97357 |
files | client/src/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 20 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue Thu Sep 27 13:36:43 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Thu Sep 27 14:00:50 2018 +0200 @@ -124,14 +124,31 @@ this.drawFairway({ graph, xScale, - yScaleLeft, + yScaleRight, currentData, height, width }); }, - drawFairway() { - console.log(this.fairwayCoordinates); + drawFairway({ graph, height, xScale, yScaleRight }) { + for (let coordinates of this.fairwayCoordinates) { + const [startPoint, endPoint, depth] = coordinates; + let fairwayArea = d3 + .area() + .x(function(d) { + return xScale(d.x); + }) + .y0(height) + .y1(function(d) { + return yScaleRight(d.y); + }); + graph + .append("path") + .datum([{ x: startPoint, y: -depth }, { x: endPoint, y: -depth }]) + .attr("fill", "#002AFF") + .attr("stroke", "#FFD20D") + .attr("d", fairwayArea); + } }, drawLabels({ graph, height }) { graph