1 | (function(global){
|
---|
2 |
|
---|
3 | global.createChart = createChart;
|
---|
4 |
|
---|
5 | function createChart() {
|
---|
6 | this.datas = [];
|
---|
7 | }
|
---|
8 |
|
---|
9 | // datastoreã®ãã¼ã¿ããæç»ç¨ã®ãã¼ã¿ã«å¤æãã
|
---|
10 | function get_graph_data(data){
|
---|
11 | return data.map(function(d) {
|
---|
12 | return {
|
---|
13 | date : new Date(d.timestamp),
|
---|
14 | value : d.value
|
---|
15 | };
|
---|
16 | });
|
---|
17 | }
|
---|
18 |
|
---|
19 | // ã°ã©ããæç»ããdivã®idãæå®ãã
|
---|
20 | createChart.prototype.setSvg = function(wrapper_id) {
|
---|
21 | this.wrapper_id = wrapper_id || 'svg-chart';
|
---|
22 | }
|
---|
23 |
|
---|
24 | // æç»ãããã¼ã¿ãã»ããï¼æ´æ°
|
---|
25 | createChart.prototype.setDatas = function(datas) {
|
---|
26 | this.datas = datas;
|
---|
27 | }
|
---|
28 |
|
---|
29 | // åæå
|
---|
30 | createChart.prototype.init = function() {
|
---|
31 |
|
---|
32 | // æç»ç¯å²ã«é¢ããå¤æ°
|
---|
33 | var margin = {top: 20, right: 20, bottom: 30, left: 50},
|
---|
34 | width = 1040 - margin.left - margin.right,
|
---|
35 | height = 420 - margin.top - margin.bottom;
|
---|
36 |
|
---|
37 | // x軸ã®ã¹ã±ã¼ã«ï¼æéï¼ãã¬ã³ã¸(åºåç¯å²)ã®æå®
|
---|
38 | var xScale = d3.time.scale()
|
---|
39 | .range([0, width]);
|
---|
40 |
|
---|
41 | // y軸ã®ã¹ã±ã¼ã«ï¼ã»ã³ãµã¼ãã¼ã¿ã®å¤ï¼ãã¬ã³ã¸(åºåç¯å²)ã®æå®
|
---|
42 | var yScale = d3.scale.linear()
|
---|
43 | .range([height, 0]);
|
---|
44 |
|
---|
45 | // ã¹ã±ã¼ã«ãå
|
---|
46 | ã«x軸ã®è¨å®ï¼å
|
---|
47 | ¥åå¤ã®ç¯å²ã¯ã¾ã æå®ãã¦ããªãããã¼ã¿ãåãåã£ã¦ããæå®ããï¼
|
---|
48 | var xAxis = d3.svg.axis()
|
---|
49 | .scale(xScale)
|
---|
50 | .orient("bottom");
|
---|
51 |
|
---|
52 | // ã¹ã±ã¼ã«ãå
|
---|
53 | ã«y軸ã®è¨å®
|
---|
54 | var yAxis = d3.svg.axis()
|
---|
55 | .scale(yScale)
|
---|
56 | .orient("left");
|
---|
57 |
|
---|
58 | // SVGè¦ç´ ã®ä½æï¼attrã¨ãã¯ãã³ãã¬ï¼
|
---|
59 | var svg = d3.select("#" + this.wrapper_id).append("svg")
|
---|
60 | .attr("class", "chart")
|
---|
61 | .attr("width", width + margin.left + margin.right)
|
---|
62 | .attr("height", height + margin.top + margin.bottom)
|
---|
63 | .append("g")
|
---|
64 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
---|
65 |
|
---|
66 | // æãç·ã°ã©ãã®è¨å®ãxã«æéãyã«ã»ã³ãµã¼ãã¼ã¿ã®å¤ãè¨å®ã
|
---|
67 | var line = d3.svg.line()
|
---|
68 | .x(function(d) {
|
---|
69 | // xã¹ã±ã¼ã«ã§ããããããæéãè¿ã
|
---|
70 | return xScale(d.date);
|
---|
71 | })
|
---|
72 | .y(function(d) {
|
---|
73 | // yã¹ã±ã¼ã«ã§ããããããã»ã³ãµã¼ãã¼ã¿ã®å¤ãè¿ã
|
---|
74 | return yScale(d.value);
|
---|
75 | });
|
---|
76 |
|
---|
77 |
|
---|
78 | // ãããããã¡ã³ãå¤æ°ã«
|
---|
79 | this.height = height;
|
---|
80 | this.margin = margin;
|
---|
81 | this.width = width;
|
---|
82 | this.xScale = xScale;
|
---|
83 | this.yScale = yScale;
|
---|
84 | this.xAxis = xAxis;
|
---|
85 | this.yAxis = yAxis;
|
---|
86 | this.svg = svg;
|
---|
87 | this.line = line;
|
---|
88 | }
|
---|
89 |
|
---|
90 |
|
---|
91 | // æåã®æç»
|
---|
92 | createChart.prototype.initialDraw = function() {
|
---|
93 |
|
---|
94 | var dataset = get_graph_data(this.datas);
|
---|
95 |
|
---|
96 | // ãã¡ã¤ã³ï¼å
|
---|
97 | ¥åå¤ã®ç¯å²ï¼ã®è¨å®ãextentã¡ã½ããã§datasetã®æå°ã¨æ大ãè¿ã
|
---|
98 | this.xScale.domain(d3.extent(dataset, function(d) { return d.date; }));
|
---|
99 | this.yScale.domain(d3.extent(dataset, function(d) { return d.value; }));
|
---|
100 |
|
---|
101 | // x軸ã®æç»
|
---|
102 | this.svg.append("g")
|
---|
103 | .attr("class", "x axis")
|
---|
104 | .attr("transform", "translate(0," + this.height + ")")
|
---|
105 | .call(this.xAxis);
|
---|
106 |
|
---|
107 | // y軸ã®æç»
|
---|
108 | this.svg.append("g")
|
---|
109 | .attr("class", "y axis")
|
---|
110 | .call(this.yAxis)
|
---|
111 | .append("text")
|
---|
112 | .attr("transform", "rotate(-90)")
|
---|
113 | .attr("y", 6)
|
---|
114 | .attr("dy", ".71em")
|
---|
115 | .style("text-anchor", "end")
|
---|
116 | .text("Value");
|
---|
117 |
|
---|
118 | // æãç·ã®æç»
|
---|
119 | this.svg.append("path")
|
---|
120 | .datum(dataset)
|
---|
121 | .attr("class", "line")
|
---|
122 | .attr("d", this.line);
|
---|
123 | }
|
---|
124 |
|
---|
125 |
|
---|
126 | // æ´æ°ããéã®æç»
|
---|
127 | createChart.prototype.updateDraw = function() {
|
---|
128 |
|
---|
129 | var dataset = get_graph_data(this.datas);
|
---|
130 |
|
---|
131 | // ãã¡ã¤ã³ï¼å
|
---|
132 | ¥åå¤ã®ç¯å²ï¼ã®æ´æ°
|
---|
133 | this.xScale.domain(d3.extent(dataset, function(d) { return d.date; }));
|
---|
134 | this.yScale.domain(d3.extent(dataset, function(d) { return d.value; }));
|
---|
135 |
|
---|
136 | // ã¢ãã¡ã¼ã·ã§ã³ãã¾ãããã¨ãã宣è¨
|
---|
137 | this.svg = d3.select("#" + this.wrapper_id).transition();
|
---|
138 |
|
---|
139 | this.svg.select(".line") // æãç·ã
|
---|
140 | .duration(750) // 750msã§
|
---|
141 | .attr("d", this.line(dataset)); // ï¼æ°ããï¼datasetã«å¤åãããæç»ãã¢ãã¡ã¼ã·ã§ã³
|
---|
142 |
|
---|
143 | this.svg.select(".x.axis") // x軸ã
|
---|
144 | .duration(750) // 750msã§
|
---|
145 | .call(this.xAxis); // ï¼domainã®å¤æ´ã«ãã£ã¦å¤åããï¼xAxisã«å¤åãããæç»ãã¢ãã¡ã¼ã·ã§ã³
|
---|
146 |
|
---|
147 | this.svg.select(".y.axis") // y軸ã
|
---|
148 | .duration(750) // 750msã§
|
---|
149 | .call(this.yAxis); // ï¼domainã®å¤æ´ã«ãã£ã¦å¤åããï¼yAxisã«å¤åãããæç»ãã¢ãã¡ã¼ã·ã§ã³
|
---|
150 | }
|
---|
151 |
|
---|
152 | }(window))
|
---|