以下のgithubのコードを参考に、
温度表示をしているのですが、
温度が大きく触れた場合におおいのですが、
たまに、グラフが写真の様に、うまく表示ができない時があり困っています。
なにか、考えられる原因はあるのでしょうか。
【追記】
桁が、9℃から10℃のように、
一桁から二桁に変わった瞬間に以下のような表記になりました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>自宅の気温</title> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script> 7<script src="http://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script> 8<script src="chart.js"></script> 9<script> 10window.addEventListener('load', function () { 11 12 var milkcocoa = new MilkCocoa("****.mlkcca.com"); 13 var datastore = []; 14 15 var chart = new createChart(); 16 chart.setSvg("temp"); 17 chart.init(); 18 19 20 milkcocoa.dataStore('temp').stream().size(144).next(function(err, datas) { 21 //console.log(datas); 22 datastore = datas.map(function(d) { 23 return { 24 timestamp : d.timestamp, 25 value : d.value.temp 26 } 27 }); 28 29 chart.setDatas(datastore); 30 chart.initialDraw(); 31 }) 32 chart.setDatas(datastore); 33 chart.initialDraw(); 34}); 35</script> 36 37<style> 38html, body{ 39 background-color: #222; 40} 41.chart { 42 width: 1040px; 43 height: 420px; 44} 45.domain{ 46 stroke-width: 1px; 47 stroke: #f2f2ff; 48} 49text{ 50 font-size: 11px; 51 fill: #efefef; 52} 53path{ 54 fill: none; 55 stroke: #FFF5C9; 56} 57 58 </style> 59</head> 60<body> 61 <p style="text-align: center; color: #fff; font-size: 13px;"> 62 自宅の温度 63 </p> 64 <div id=nowtemp></div> 65 <div id="temp" style="margin: 0 auto; width: 1040px;"></div> 66</html>
javascript
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 console.log(d); 17 }); 18 } 19 20 // グラフを描画するdivのidを指定する 21 createChart.prototype.setSvg = function(wrapper_id) { 22 this.wrapper_id = wrapper_id || 'svg-chart'; 23 } 24 25 // 描画するデータをセット/更新 26 createChart.prototype.setDatas = function(datas) { 27 this.datas = datas; 28 } 29 30 // 初期化 31 createChart.prototype.init = function() { 32 33 // 描画範囲に関する変数 34 var margin = {top: 20, right: 20, bottom: 30, left: 50}, 35 width = 1040 - margin.left - margin.right, 36 height = 420 - margin.top - margin.bottom; 37 38 // x軸のスケール(時間)。レンジ(出力範囲)の指定 39 var xScale = d3.time.scale() 40 .range([0, width]); 41 42 // y軸のスケール(センサーデータの値)。レンジ(出力範囲)の指定 43 var yScale = d3.scale.linear() 44 .range([height, 0]); 45 46 // スケールを元にx軸の設定(入力値の範囲はまだ指定していない。データを受け取ってから指定する) 47 var xAxis = d3.svg.axis() 48 .scale(xScale) 49 .orient("bottom"); 50 51 // スケールを元にy軸の設定 52 var yAxis = d3.svg.axis() 53 .scale(yScale) 54 .orient("left"); 55 56 // SVG要素の作成(attrとかはテンプレ) 57 var svg = d3.select("#" + this.wrapper_id).append("svg") 58 .attr("class", "chart") 59 .attr("width", width + margin.left + margin.right) 60 .attr("height", height + margin.top + margin.bottom) 61 .append("g") 62 .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 63 64 // 折れ線グラフの設定。xに時間、yにセンサーデータの値を設定。 65 var line = d3.svg.line() 66 .x(function(d) { 67 // xスケールでマップされた時間を返す 68 var time=d.date; 69 return xScale(time); 70 }) 71 .y(function(d) { 72 // yスケールでマップされたセンサーデータの値を返す 73 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 // ドメイン(入力値の範囲)の設定、extentメソッドでdatasetの最小と最大を返す 97 this.xScale.domain(d3.extent(dataset, function(d) { return d.date; })); 98 this.yScale.domain(d3.extent(dataset, function(d) { return d.value; })); 99 100 // x軸の描画 101 this.svg.append("g") 102 .attr("class", "x axis") 103 .attr("transform", "translate(0," + this.height + ")") 104 .call(this.xAxis); 105 106 // y軸の描画 107 this.svg.append("g") 108 .attr("class", "y axis") 109 .call(this.yAxis) 110 .append("text") 111 .attr("transform", "rotate(-90)") 112 .attr("y", 6) 113 .attr("dy", ".71em") 114 .style("text-anchor", "end") 115 .text("Value"); 116 117 // 折れ線の描画 118 this.svg.append("path") 119 .datum(dataset) 120 .attr("class", "line") 121 .attr("d", this.line); 122 } 123 124 125 // 更新した際の描画 126 /* createChart.prototype.updateDraw = function() { 127 128 var dataset = get_graph_data(this.datas); 129 130 // ドメイン(入力値の範囲)の更新 131 this.xScale.domain(d3.extent(dataset, function(d) { return d.date; })); 132 this.yScale.domain(d3.extent(dataset, function(d) { return d.value; })); 133 134 // アニメーションしますよ、という宣言 135 this.svg = d3.select("#" + this.wrapper_id).transition(); 136 137 this.svg.select(".line") // 折れ線を 138 .duration(750) // 750msで 139 .attr("d", this.line(dataset)); // (新しい)datasetに変化させる描画をアニメーション 140 141 this.svg.select(".x.axis") // x軸を 142 .duration(750) // 750msで 143 .call(this.xAxis); // (domainの変更によって変化した)xAxisに変化させる描画をアニメーション 144 145 this.svg.select(".y.axis") // y軸を 146 .duration(750) // 750msで 147 .call(this.yAxis); // (domainの変更によって変化した)yAxisに変化させる描画をアニメーション 148 }*/ 149 150}(window)) 151
回答1件
あなたの回答
tips
プレビュー