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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

0回答

1470閲覧

D3.js で数値データの無いCSVファイルから折れ線グラフを生成したい

jam912sh

総合スコア25

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/09/04 05:42

編集2022/01/12 10:55

数値データの無いCSVデータから折れ線グラフを表示させたい

以下のCSVファイルを読み込んで、D3.jsを使い、WEBページ上に
グラフを表示させたいのですが、CSVデータに数値が無い
状態で、グラフ化するやり方がわかりません。
JavaScriptにお詳しい方、ご教授頂けますと幸いで御座います。

■作りたいグラフ
・横軸→日付
・縦軸→合算数(下記CSVの宮崎なら、1/2→2件、1/3→1件)
・凡例→宮崎、鹿児島、福岡(動的な生成)

読み込むCSVファイル(data.csv)

data,value 1/2,宮崎 1/2,宮崎 1/3,宮崎 1/3,鹿児島 1/10,鹿児島 1/10,鹿児島 1/31,福岡

試してみたけど、グラフが表示されないコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <link rel="stylesheet" href="css/main.css"> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <h1>テスト</h1> <script> // X,Y軸を表示できるようにグラフの周囲にマージンを確保する var margin = {top: 40, right: 80, bottom: 80, left: 80}; var width = 800 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; // CSVファイルの読み込み d3.csv("data.csv", function(error, dataSet){ // SVGの表示領域を生成 var svg = d3.select("#MyGraph") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); // 読み込んだCSVデータから時間軸の両端を抽出 var n = dataSet.length; time_start = new Date(dataSet[0]["data"]); // 時間軸のスケール関数を生成 var time_scale = d3.time.scale() .domain([time_start, time_end]) .range([0, width]); // 縦軸のスケール関数を生成 var y_scale = d3.scale.linear() .domain([1,10]) .range([height, 0]); // 福岡、熊本、宮崎、鹿児島を生成 var line_1 = d3.svg.line() .x(function(d,i){ var tmp = new Date(d["data"]); return time_scale(tmp); }) .y(function(d,i){ return y_scale(d["福岡"]); }); var line_2 = d3.svg.line() .x(function(d,i){ var tmp = new Date(d["data"]); return time_scale(tmp); }) .y(function(d,i){ return y_scale(d["熊本"]); }); var line_3 = d3.svg.line() .x(function(d,i){ var tmp = new Date(d["data"]); return time_scale(tmp); }) .y(function(d,i){ return y_scale(d["宮崎"]); }); var line_4 = d3.svg.line() .x(function(d,i){ var tmp = new Date(d["data"]); return time_scale(tmp); }) .y(function(d,i){ return y_scale(d["鹿児島"]); }); // 折れ線グラフを生成 svg.append("path") .attr("d", line_1(dataSet)) .style("stroke", "red") .style("fill", "none"); svg.append("path") .attr("d", line_2(dataSet)) .style("stroke", "blue") .style("fill", "none"); svg.append("path") .attr("d", line_3(dataSet)) .style("stroke", "purple") .style("fill", "none"); svg.append("path") .attr("d", line_4(dataSet)) .style("stroke", "orange") .style("fill", "none"); // 凡例を作成 var label = [ "福岡","熊本","宮崎","鹿児島"]; var labelColor = ["red", "blue", "purple", "orange"]; svg.selectAll("text") .data(label) .enter() .append("text") .text(function(d){ return d; }) .style("fill", function(d,i){ return labelColor[i]; }) .attr("x", width - 40) .attr("y", function(d, i){ return 20*(i+1); }); // X軸を描画 svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg .axis() .scale(time_scale) .orient("bottom") .tickFormat(function(d,i){ var fmtFunc = d3.time.format("%b-%d"); return fmtFunc(d); }) ) .selectAll("text") .attr("transform", "rotate(45)") .attr("dy", 10) .attr("dx", 10) .style("text-anchor", "start"); // Y軸を描画 svg.append("g") .attr("class", "axis") .call(d3.svg.axis() .scale(y_scale) .orient("left") ); }); </script> </body> </html>

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問