数値データの無い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>
あなたの回答
tips
プレビュー