[254] | 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))
|
---|