d3.jsで棒グラフを書くときのサンプル
目標
下のような棒グラフをd3.jsを使って書く
環境
d3.js 4.6.0
特記事項
全般
- highcharts.jsなどのライブラリと比較すると考え方がかなり違うので、移行の際は注意
バージョン
- d3.jsがバージョン3と4でAPIがかなり変わっているので、調べるときはバージョンに注意が必要
- 例えば、以下の記述はv4では使えない(が、割と見かける)
//エラーも出ない .attr({ x : function(d, i) { return i} y : function(d){ return d }, }); //こちらはエラーは出る d3.scale.linear()
コード
<html> <head> <script type="text/javascript" src="d3.js"></script> </head> <body> <!-- グラフを描画するためのsvg要素を作っておく --> <svg id="bar" width="500" height="300"></svg> <script type="text/javascript"> width = 500; height = 300; elementName = "#bar" //作っておいたsvg要素の名前 var dataSet = []; //棒グラフの各項目の値 var dataLabel = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; //棒グラフの各項目の名前 for (var i = 0; i < 10; i++) { dataSet.push(Math.random()) } //グラフの各値をいい感じのwidthにするための変換関数 var x = d3.scaleLinear() //配列の中身が数字 かつ 線形なグラフのとき .domain([0, 1]) //グラフがとりうる値の範囲 .rangeRound([20, width-10]) //実際の長さとしての範囲をいくつからいくつにするか。マージンをどの程度取りたいかの指定として使える。 //グラフのラベル数にもとづいて、項目間の幅をいい感じにするための変換関数 var y = d3 .scaleBand() //配列の中身がラベルのとき .domain(dataLabel) //配列をそのまま渡す .rangeRound([20, height]); //実際の長さとしての範囲をいくつからいくつにするか //xとyは軸の描画でも使う //グラフ用のsvg要素に棒グラフの「棒(rect)」を追加する d3 .select(elementName) // svg要素を指定 .selectAll('rect') // その中のrect要素を抽出(なければ空オブジェクトが返ってくる) .data(dataSet) // 描画元のデータを指定 .enter() // selectAllで足りない分の要素を確保する .append('rect'); //確保した要素にrectとして追加する //棒グラフの「棒」の部分の描画 d3.select(elementName).selectAll('rect') //svg要素の中のrect要素をすべて選択(さっき作ったもの) .attr("class", "bar") //棒グラフであることを明示(必須ではない) .attr("x", function(d){return x(0)}) //各値のx座標を指定。左端にしたいので0にする。 //ここで、x関数をかませることで、マージンを考慮した「左端」が指定できる .attr("y", function(d, i){return y(dataLabel[i])}) //各要素のy座標をy関数を使って指定。y関数はdataLabel内の要素に紐付いているので、y(dataLabel)の形式になる。 //iはdataSetの何番目の要素を参照しているかが入る .attr("height", 15) //各棒の縦の長さ(今回は棒の幅) .attr("width", function(d){return x(d)}) //各棒の横の長さ(今回は棒の長さ) //dはdataSetの値そのものが入る。x関数を噛ませて長さを指定。 .attr("fill", "#6fbadd") //棒の色 //棒グラフのx軸の描画 d3.select(elementName) //グラフ用のsvg要素を持ってくる .append("g") //軸描画用の要素を追加(gという名前じゃないと動かない) .attr("class", "axis axis--x") //x軸用の要素を追加 .attr("transform", "translate(0, 20)") //(0,20)の位置を起点として描画 .call(d3.axisTop(x)); //上に軸が出るように設定 //棒グラフのy軸の描画 d3.select(elementName) //グラフ用のsvg要素を持ってくる .append("g") //軸描画用の要素を追加(gという名前じゃないと動かない) .attr("class", "axis axis--y") //y軸用の要素を追加 .attr("transform", "translate(20, 0)") //(20,0)の位置を起点として描画 .call(d3.axisLeft(y)); //左に軸が出るように設定 </script> </body> </html>