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

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

ただいまの
回答率

90.50%

  • JavaScript

    16948questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9247questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Milkcocoa

    103questions

    Milkcocoaとは、バックエンド機能を提供するBaaSサービスの一つです。サーバを準備することなく、フロントエンドのコーディングだけでデータの保存・更新・取得、またPub/Sub通信行うことが可能です。

  • D3.js

    80questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 818

usuallyi

score 29

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mukkun

    2017/01/11 16:55

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

    キャンセル

  • 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);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

  • 解決済

    html5のvideoタグで、マウスオーバーで再生

    html5のvideoタグで、マウスオーバーで再生、マウスアウトで停止する記述をしたいと思っています。 再生・停止はできたのですが、停止後にposterで指定した画像を表示さ

  • 解決済

    D3.jsで折れ線グラフ表示 時間軸について

    D3.jsにてcsvファイルから折れ線グラフを表示しています。 時間軸をcsvで保存した一番古い時間”%H:%M”をX軸とY軸の交点に、 csvで保存した最新の時間”%H:

  • 解決済

    続[Jquery]animate関数がうまく制御出来ない

    いつもお世話になっております。 今朝animate関数の使い方で質問させて頂いた者です。 その際、回答者様に頂いたサンプルを改変し、なんとか動く物は完成しました。 しかし

  • 解決済

    「colorbox.js」でカレント表示を出したい

    前提・実現したいこと 「colorbox.js」(http://www.jacklmoore.com/colorbox/)でinlineのカルーセル形式にしているのですが、 現

  • 解決済

    chart.jsで境界線以降を塗りつぶしたい。

    chart.jsを使ってグラフを表示する機能を実装しています。 chart.jsのドキュメントを一通り見ましたが見つからなかったので質問させていただきます。 下の画像の黄色

  • 解決済

    タブの中身をまるごとリンクにする

    タブの中身をそのままリンクさせたいのですが、リンク先にいきません。どうしてでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <me

  • 解決済

    jquery.inview.jsが反応しない

    質問はコード内にあります、また画像はここでは(画像)と表記しています <!DOCTYPE html> <head> <meata lang="ja"> <meta chars

  • 解決済

    jQueryのclone()を使った画像ポップアップについて

    初めまして、kuroishiと申します。 私は現在HP制作をやっているのですが、その製作段階でわからないことがあったため質問させていただきます。 javascript

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

  • JavaScript

    16948questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9247questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Milkcocoa

    103questions

    Milkcocoaとは、バックエンド機能を提供するBaaSサービスの一つです。サーバを準備することなく、フロントエンドのコーディングだけでデータの保存・更新・取得、またPub/Sub通信行うことが可能です。

  • D3.js

    80questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。