前回の記事では、四角形と一本の棒グラフを表示させました。
しかし、データが複数がある場合は、データの数だけ
append("rect")とattr()を使い四角形を生成すればいいでしょうか。
表示する棒が5本ならいいですが、30,40も棒グラフあったら大変です。
D3.jsにはデータの塊(データセット)に応じて自動的に要素を
追加・削除する機能が用意されています。
selectAll(),data(),enter()メソッドです。これらを使えば、
共通する属性をまとめて指定しながら、データの数に応じて
複数のrect要素を生成できます。
サンプルコードの実行結果はこちら
index.html
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>D3.js 棒グラフを表示してみる</title> <style> svg{ width:400px; height:300px; border:solid 1px green; } /* rect要素で設定するstyleプロパティ ここでのプロパティはSVG用の物です。 */ #sampleGraph rect{ stroke:#900000; stroke-width:2px; fill:#c0c0c0; } </style> <script src="../js/d3.js"></script> </head> <body> <h1>棒グラフ(一本)をD3.jsを使って表示します。</h1> <svg id="sampleGraph"> </svg> <!-- グラフを表示する命令が 書かれたJSファイルを読み込む --> <script src="test.js"></script> </body> </html> |
test.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 |
var dataSet = [250,100,50,20,300] d3.select("#sampleGraph") //SVG要素を指定 /* selectAll()メソッドで 書き換え・追加対象となる要素を選択します。 rect要素を追加するので"rect"要素を指定します。 select("#sampleGraph")とは違い、この時点では rect要素はまだ存在しません。ということは、 後から動的に追加されるrect要素を選択してます。 */ .selectAll("rect") //SVGで四角形を示す要素を指定 /* data()メソッドで、 用意したデータをデータセットとして内部に保存します。 新規に追加されるデータに関しては、 enterメソッド以降の処理が適用されます。 */ .data(dataSet) //データを設定 .enter() //データ数に応じ、rect要素を生成 /* append()メソッドで、 追加する要素とデータを結びつけます。 今回だと、rect要素とデータが対応付けれられます。 */ .append("rect") //SVG四角形を生成 .attr("x",0) //棒グラフの表示場所 X座標 /* attr()メソッド D3.jsでの特別な機能があります。 attr()メソッドの第2引数に関数を指定することができ、 D3.jsでは引数に関数が指定された場合、関数に データセットのデータが1つずつ渡されます。 ということは、関数に渡されたデータを処理し返すことで データに応じたグラフを描画することができます。 function(d,i) 第1引数:データ 第2引数:データの出現順番 出現順番は最初のデータが0で、その次が1と増えていきます。 データセットが 「var dataSet = [250,100,50,20,300];」なら function(d,i)のd(データ)とi(順番)の値は下記のようになります。 i 0, 1, 2, 3, 4 d 250,100,50,20,300 */ .attr("y",function(d,i){ //棒グラフの位置を下に32pxずつずらす return i * 32; }) //棒グラフの表示場所 Y座標 .attr("width",function(d,i){ //dataSetの各値を設定 return d +"px"; }) //棒グラフの横幅 変数dataSet[0]の値 .attr("height","24px"); //棒グラフの高さ |
SVGのrect要素のスタイルシートのプロパティ
プロパティ | 説明 |
---|---|
fill | 図形の塗りつぶされた色を指定。red,rgb(0,255,0),#ff0000とか |
stroke | 図形の線の色を指定。red,rgb(0,255,0),#ff0000とか |
stroke-width | 図形の線幅 単位px |