D3.js 3.5.9 |
■D3.js でアニメーション [ サンプルページの表示 ] | Prev Top Next | |
|
今回は、SVGを使用して棒グラフをアニメーションします。D3.jsは直接関係しません。
html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。
---javascript14.ts---
function show14() { 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 height - padding; // アニメーションの開始状態 }) .attr("width", 30 ) .attr("height", (d) => { // アニメーションの開始状態 return 0; }) .attr("fill", "#0fff0f" ) // アニメーションの開始状態 .transition() // ここからアニメーション .delay( (d, i) => { // 遅延実行 return i * 100; }) .duration(1000) // アニメーションの持続時間。値を大きくすると遅くなる。 .attr("y", (d) => { // 棒グラフの開始位置のアニメーション終了後の座標 return yScale(d.点数); }) .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---stylesheet14.css---
.axis path, .axis line{ fill: none; /* 塗りつぶさない */ stroke: black; /* 線の色 */ shape-rendering: crispEdges; /* アンチエイリアスを無効 */ } .axis text { font-family: sans-serif; font-size: 13px; }