Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<div ref="station-chart" id="stationChartSVG" width="200px" height="200px"></div>
</template>
<script lang="ts">
import * as d3 from 'd3';
import {Vue, Ref } from 'vue-property-decorator';
import {TemperatureSeries} from './StationLayer';
export default class StationChartPopup extends Vue{
name = 'StationChartPopup';
private d3svg: any;
private path: any;
private xScale: any;
private yScale: any;
private yAxis: any;
private yAxisContainer: any;
private xAxisContainer: any;
private xAxis: any;
private margin = {top: 10, right: 30, bottom: 30, left: 60}
private width = 500 - this.margin.left - this.margin.right;
private height = 200 - this.margin.top - this.margin.bottom;
mounted(){
}
public renderGraph(tSeries: TemperatureSeries[]): void{
if (!this.path){
console.log("new path 2")
this.d3svg = d3.select("#stationChartSVG")
.append("svg")
.attr("width", this.width + this.margin.left + this.margin.right)
.attr("height", this.height + this.margin.top + this.margin.bottom)
.append("g")
.attr("transform", "translate("+this.margin.left+","+this.margin.top+")");
this.xScale = d3.scaleLinear()
//.domain(d3.extent(tSeries, function(d){return d.date}))
//.domain([1950,2021])
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
.range([0, this.width]);
this.xAxis = d3.axisBottom(this.xScale).tickFormat(d3.format("d"));
this.xAxisContainer = this.d3svg.append("g")
.attr("transform", "translate(0,"+this.height+")")
.call(this.xAxis);
this.yScale = d3.scaleLinear()
.domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
.range([this.height, 0]);
this.yAxis = d3.axisLeft(this.yScale);
this.yAxisContainer = this.d3svg.append("g")
.call(this.yAxis);
}
this.xScale.domain(d3.extent(tSeries, function(d){return d.date})).range([0, this.width]);
this.xAxis = d3.axisBottom(this.xScale).tickFormat(d3.format("d"));
this.xAxisContainer.call(this.xAxis).transition().duration(1000);
this.yScale.domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
.range([this.height, 0]).nice();
this.yAxisContainer.call(this.yAxis).transition()
.duration(1000);
this.path = this.d3svg.selectAll(".t-line")
.data([tSeries], function(d){ return d.value });
this.path.enter().append("path")
.attr("class", "t-line")
.merge(this.path)
.transition()
.duration(1000)
.attr("d", d3.line()
.x((d)=>{return this.xScale(d.date)})
.y((d)=>{return this.yScale(d.value)}))
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 2);
}
}
</script>