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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

2189閲覧

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

usuallyi

総合スコア41

D3.js

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/01/11 07:23

編集2017/01/15 08:58

以下の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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mukkun

2017/01/11 07:55

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

2017/01/13 07:58

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

回答1

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

投稿2017/01/17 15:51

usuallyi

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問