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

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

新規登録して質問してみよう
ただいま回答率
86.12%
D3.js

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

JavaScript

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

HTML

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

解決済

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

usuallyi
usuallyi

総合スコア41

D3.js

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

JavaScript

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

HTML

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

1回答

0リアクション

0クリップ

1921閲覧

投稿2017/01/11 07:23

編集2017/01/15 08:58

以下のgithubのコードを参考に、
温度表示をしているのですが、
温度が大きく触れた場合におおいのですが、
たまに、グラフが写真の様に、うまく表示ができない時があり困っています。

なにか、考えられる原因はあるのでしょうか。
【追記】
桁が、9℃から10℃のように、
一桁から二桁に変わった瞬間に以下のような表記になりました。

html

<!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>

javascript

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

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

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

適切な質問に修正を依頼しましょう。

mukkun

2017/01/11 07:55

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

2017/01/13 07:58

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

D3.js

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

JavaScript

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

HTML

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