D3.js 3.5.9 |
■D3.js でCSV読み込み [ サンプルページの表示 ] | Prev Top Next | |
|
今回は、D3.jsで使えるメソッドを使用してCSVファイルを読んで棒グラフを表示します。
html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。
---javascript13.ts---
function show13() { var width: number = 500; var height : number = 200; var padding:number = 25; // オフセット値 var svg = d3.select("body") .append("svg") .attr("width", width ) .attr("height", height ); var dataset; d3.csv("test.csv", (error, dataset) => { console.log( dataset ); // x 座標を入力ドメインおよび出力レンジから生成 // 入力ドメインは入力値の分散値、出力レンジは画面表示上の大きさの分散値を指定 var xScale = d3.scale.linear() // 線形スケール .domain([0, dataset.length]) .range([padding, width - padding]); // 出力レンジ:0〜SVGの横幅いっぱいの範囲( 適当に調整している ) // y 座標を入力ドメインおよび出力レンジから生成 var yScale = d3.scale.linear() // 線形スケール .domain([0, 100]) .range([height - padding, padding]); // 出力レンジ:0〜SVGの縦幅いっぱいの範囲( 適当に調整している ) // 左上が原点なので逆転させる // 棒グラフ描画 var rects = svg.selectAll("rect") .data(dataset) .enter() .append("rect"); // d: 値 rects.attr("x", (d, i) => { return xScale(i); }) .attr("y", (d) => { return yScale(d.点数); // なぞ }) .attr("width", 30 ) .attr("height", (d) => { return height - padding - yScale(d.点数); // なぞ }) .attr("fill", (d) => { if( d.点数 >= 80 ){ return "#afafff"; } else if( d.点数 <= 30 ){ return "#ff5f5f"; } else{ return "#0fff0f"; } }); // 軸生成 var xAxis = d3.svg.axis() .scale( xScale ) // スケールから軸を生成する .orient("botton") // 軸を下側にラベル表示 .ticks(5) // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する ) .tickSize(6, // 軸から出る目盛りの長さ -height + padding * 2 // 外枠の長さ ) .tickFormat( function(d, i){ if( dataset.length > i ) { return dataset[i].科目; } }); svg.append("g") // SVG用の要素。オブジェクトをグループ化する。 .attr("class", "axis") // スタイルシートで属性を変更するためにclass属性を追加 .attr("transform", "translate( 0, " + ( height - padding ).toString(10) + ")" ) // y方向に平行移動( 原点は左上 ) .call(xAxis); var yAxis = d3.svg.axis() .scale( yScale ) // スケールから軸を生成する .orient("left") // 軸を左側にラベル表示 .ticks(5) // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する ) .tickSize(6, // 軸から出る目盛りの長さ -width + padding * 2 // 外枠の長さ ); svg.append("g") // SVG用の要素。オブジェクトをグループ化する。 .attr("class", "axis") // スタイルシートで属性を変更するためにclass属性を追加 .attr("transform", "translate( " + ( padding ).toString(10) + ", 0 )" ) // x方向に平行移動 .call(yAxis); }); }---test.csv---
科目,点数 国語,30 数学,89 理科,73 "社会",65 "英語",70---stylesheet13.css---
.axis path, .axis line{ fill: none; /* 塗りつぶさない */ stroke: black; /* 線の色 */ shape-rendering: crispEdges; /* アンチエイリアスを無効 */ } .axis text { font-family: sans-serif; font-size: 13px; }