以下のgithubのコードを参考に、
温度表示をしているのですが、
温度が大きく触れた場合におおいのですが、
たまに、グラフが写真の様に、うまく表示ができない時があり困っています。
なにか、考えられる原因はあるのでしょうか。
【追記】
桁が、9℃から10℃のように、
一桁から二桁に変わった瞬間に以下のような表記になりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自宅の気温</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="http://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="chart.js"></script>
<script>
window.addEventListener('load', function () {
var milkcocoa = new MilkCocoa("****.mlkcca.com");
var datastore = [];
var chart = new createChart();
chart.setSvg("temp");
chart.init();
milkcocoa.dataStore('temp').stream().size(144).next(function(err, datas) {
//console.log(datas);
datastore = datas.map(function(d) {
return {
timestamp : d.timestamp,
value : d.value.temp
}
});
chart.setDatas(datastore);
chart.initialDraw();
})
chart.setDatas(datastore);
chart.initialDraw();
});
</script>
<style>
html, body{
background-color: #222;
}
.chart {
width: 1040px;
height: 420px;
}
.domain{
stroke-width: 1px;
stroke: #f2f2ff;
}
text{
font-size: 11px;
fill: #efefef;
}
path{
fill: none;
stroke: #FFF5C9;
}
</style>
</head>
<body>
<p style="text-align: center; color: #fff; font-size: 13px;">
自宅の温度
</p>
<div id=nowtemp></div>
<div id="temp" style="margin: 0 auto; width: 1040px;"></div>
</html>
(function(global){
global.createChart = createChart;
function createChart() {
this.datas = [];
}
// datastoreのデータを、描画用のデータに変換する
function get_graph_data(data){
return data.map(function(d) {
return {
date : new Date(d.timestamp),
value : d.value
};
console.log(d);
});
}
// グラフを描画するdivのidを指定する
createChart.prototype.setSvg = function(wrapper_id) {
this.wrapper_id = wrapper_id || 'svg-chart';
}
// 描画するデータをセット/更新
createChart.prototype.setDatas = function(datas) {
this.datas = datas;
}
// 初期化
createChart.prototype.init = function() {
// 描画範囲に関する変数
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1040 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
// x軸のスケール(時間)。レンジ(出力範囲)の指定
var xScale = d3.time.scale()
.range([0, width]);
// y軸のスケール(センサーデータの値)。レンジ(出力範囲)の指定
var yScale = d3.scale.linear()
.range([height, 0]);
// スケールを元にx軸の設定(入力値の範囲はまだ指定していない。データを受け取ってから指定する)
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
// スケールを元にy軸の設定
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
// SVG要素の作成(attrとかはテンプレ)
var svg = d3.select("#" + this.wrapper_id).append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 折れ線グラフの設定。xに時間、yにセンサーデータの値を設定。
var line = d3.svg.line()
.x(function(d) {
// xスケールでマップされた時間を返す
var time=d.date;
return xScale(time);
})
.y(function(d) {
// yスケールでマップされたセンサーデータの値を返す
return yScale(d.value);
});
// もろもろをメンバ変数に
this.height = height;
this.margin = margin;
this.width = width;
this.xScale = xScale;
this.yScale = yScale;
this.xAxis = xAxis;
this.yAxis = yAxis;
this.svg = svg;
this.line = line;
}
// 最初の描画
createChart.prototype.initialDraw = function() {
var dataset = get_graph_data(this.datas);
// ドメイン(入力値の範囲)の設定、extentメソッドでdatasetの最小と最大を返す
this.xScale.domain(d3.extent(dataset, function(d) { return d.date; }));
this.yScale.domain(d3.extent(dataset, function(d) { return d.value; }));
// x軸の描画
this.svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxis);
// y軸の描画
this.svg.append("g")
.attr("class", "y axis")
.call(this.yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Value");
// 折れ線の描画
this.svg.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", this.line);
}
// 更新した際の描画
/* createChart.prototype.updateDraw = function() {
var dataset = get_graph_data(this.datas);
// ドメイン(入力値の範囲)の更新
this.xScale.domain(d3.extent(dataset, function(d) { return d.date; }));
this.yScale.domain(d3.extent(dataset, function(d) { return d.value; }));
// アニメーションしますよ、という宣言
this.svg = d3.select("#" + this.wrapper_id).transition();
this.svg.select(".line") // 折れ線を
.duration(750) // 750msで
.attr("d", this.line(dataset)); // (新しい)datasetに変化させる描画をアニメーション
this.svg.select(".x.axis") // x軸を
.duration(750) // 750msで
.call(this.xAxis); // (domainの変更によって変化した)xAxisに変化させる描画をアニメーション
this.svg.select(".y.axis") // y軸を
.duration(750) // 750msで
.call(this.yAxis); // (domainの変更によって変化した)yAxisに変化させる描画をアニメーション
}*/
}(window))
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
ゼロ埋めをしたら、
うまくいきました。
htmlファイルに以下のプログラムを追加
if(d.value.temp<10){
d.value.temp=( '0' + d.value.temp ).slice( -(d.value.temp.length+1));
//console.log(d.value.temp);
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
mukkun
2017/01/11 16:55
MilkCocoaで取得するデータを記載頂けると回答しやすくなります。
usuallyi
2017/01/13 16:58
milkcocoaで取得しているデータは以下のような形です。2017-01-13 16:50:02 {"temp":"9.95640772642"}