2017/11/15
D3.jsでアニメーション付き棒グラフを作ってみました
JavaScript でグラフを描くためのツールとして提供されている JavaScript ライブラリはたくさんありますが、
その中でも自由度が高く、人気があるのが D3.js です。
私はこれまでグラフを描くための JavaScript ライブラリとして Google Chart をよく使っていましたが、
グラフのデザインがある程度固定されており、デザインや動きをカスタマイズしようと思うと、
工夫と労力が必要となっていました。
しかし、D3.js では、かなり自由度の高いデザインのグラフを、
Google Chartよりも少ない労力で制作することができます。
D3.js はデータの視覚化ツールとして公開されているライブラリで、
ライブラリで追加したグラフを CSS でスタイリングできるなど、
カスタマイズが求められる場合などに、とても便利です。
今回は手始めに、D3.js を使って、アニメーション付きの棒グラフを作ってみました。
↓作ってみたもの
DEMO
方法
1. HTMLの枠とライブラリの読み込み
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style> .graph { width: 100%; padding-bottom: 50%; position: relative; } .graph__inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } </style> ・・・ <div class="graph"> <div class="graph__inner"></div> </div> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> |
2. D3.js でグラフを描画
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | var isPC = document.documentElement.scrollWidth > 768 ? true : false, margin = {top: 40, right: (isPC ? 50 : 30), bottom: 0, left: (isPC ? 240 : 140) }, //グラフの外枠のマージン設定 width = d3.select(".graph__inner")[0][0].clientWidth - margin.left - margin.right, height = d3.select(".graph__inner")[0][0].clientHeight - margin.top - margin.bottom; // X軸のスケール設定 var x = d3.scale.linear() .range([0, width]); // Y軸のスケール設定 var y = d3.scale.ordinal() .rangeRoundBands([0, height], 0.3); // X軸の描画設定 var xAxis = d3.svg.axis() .scale(x) .orient("top") .ticks(2) .tickFormat(d3.format(".0%")) .tickPadding([10]) .tickSize([0]); // Y軸の描画設定 var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickPadding([10]) .tickSize([0]); // ツールチップの設定 var tip = d3.tip() .attr('class', 'graph__tip') .offset([-10, 0]) .html(function(d) { return "<strong>利用率:</strong> <span class='graph__tip__number'>" + d3.format(".1%")(d.frequency) + "</span>"; }) // グラフの描画領域にSVGを設定 var svg = d3.select(".graph__inner").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //ツールチップの呼び出し svg.call(tip); //CSVの呼び出し d3.csv("data.csv", type, function(error, data) { //軸のラベル（項目）表示の設定 x.domain([0, 1]); y.domain(data.map(function(d) { return d.letter; })); //X軸の描画実行 svg.append("g") .attr("class", "graph__axis graph__axis--x") .call(xAxis); //Y軸の描画実行 svg.append("g") .attr("class", "graph__axis graph__axis--y") .call(yAxis); //X軸のスケール描画 svg.selectAll(".graph__axis--x .tick:not(:first-of-type) line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", height) .attr("stroke", "#aaa") .attr("stroke-dasharray", "2,2"); //棒の描画 svg.selectAll(".graph__bar") .data(data) .enter().append("rect") .attr("class", "graph__bar") .attr("x", 0) .attr("width", 0) .attr("y", function(d) { return y(d.letter); }) .attr("height", y.rangeBand()) .on('mouseover', tip.show) .on('mouseout', tip.hide) .transition() .delay(400) .duration(500) .attr("width", function(d) { return x(d.frequency); }); }); function type(d) { d.frequency = +d.frequency; return d; } |
参考サイト
[公式 Documentation] Home · d3/d3 Wiki
Author Profile
SHARE
