D3.jsでアニメーション付き棒グラフを作ってみました
2017.11.14・Cat:css3 html5 javascript SVG デザイナー

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