タイトルの通り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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>D3.js 棒グラフを表示してみる</title> <!-- D3.jsライブラリを読み込む 下記の読み込み処理を忘れるとD3.jsの機能を 使うことができない --> <script src="../js/d3.js"></script> </head> <body> <h1>まずは四角形を表示する</h1> <svg> <rect x="80" y="40" width="100" height="60"> </svg> <h1>棒グラフ(一本)をD3.jsを使って表示します。</h1> <!-- グラフを表示するための空間確保 グラフの表示はSVGを使用する。SVG図形を表示するために HTML内に下記のように書く --> <svg id="sampleGraph"> </svg> <!-- グラフを表示する命令が 書かれたJSファイルを読み込む --> <script src="test.js"></script> </body> </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 |
var dataSet = [250,100,50,20,300] /* d3.jsで四角形(rect要素)を作成するには、 append()メソッドを使います。append("rect")とすると、 rect要素が生成されます。 単に、append("rect")と指定しただけでは、どこに四角形が 生成されるかが分かりません。svg要素内にrect要素を 書かなければならないで、12行目で、svg要素のidの属性値、 #sampleGraphを指定しています。 */ d3.select("#sampleGraph") //SVG要素を指定 .append("rect") //SVGの四角形を生成 /* ブログの記事にも書いたのですが、 rect要素で四角形を描画するには、x,y,width,heightの属性値を 設定しなければいけません。 D3.jsで図形の属性を設定するには、attr()メソッドを使います。 attr("y","16px")と書けば、y属性値に16pxが設定されます。 attr()： 第1引数：属性名 第2引数：属性値 下記はrect要素の属性値を設定している */ .attr("x",0) //棒グラフの表示場所 X座標 .attr("y",0) //棒グラフの表示場所 Y座標 .attr("width",dataSet[0]) //棒グラフの横幅 変数dataSet[0]の値 .attr("height","20px"); //棒グラフの高さ |
HTMLの解説
SVG要素はHTMLファイル内のsvg要素内に書きます。svg要素内に
書かないと四角形として表示されません。。これは、四角形だけではなく
SVGで図形を表示する要素はすべて同様です。
SVGで四角形を表示するにはrect要素を使い、、下記のような
属性を使い四角形を書きます。
rect要素
<rect x="X座標" y="Y座標" width="幅" height="高さ" >
最低限、上記の４つの属性を設定しないと四角は表示されません。
D3.jsで棒グラフを表示するときは、rect要素を生成し、これら
４つの属性人値をせってします。
SVGの座標はコンピューターの一般的な座標の考えと同じで、
左上が原点となり右にいくほど座標値が大きくなります。