質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.10%

1桁から2桁と桁数が変わった時にd3.jsの縦軸が逆な値になる。

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,521
usuallyi

score 41

以下の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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert2 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • mukkun

    mukkun

    2017/01/11 16:55

    MilkCocoaで取得するデータを記載頂けると回答しやすくなります。

    キャンセル

  • usuallyi

    usuallyi

    2017/01/13 16:58

    milkcocoaで取得しているデータは以下のような形です。2017-01-13 16:50:02 {"temp":"9.95640772642"}

    キャンセル

回答 1 件

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%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る