スポンサーリンク
スポンサーリンク

D3.jsとrect要素を使い四角形を表示する

タイトルの通りD3.jsを使い棒グラフを用意します。
サンプルコードの実行結果はこちら

HTMLの解説

SVG要素はHTMLファイル内のsvg要素内に書きます。svg要素内に
書かないと四角形として表示されません。。これは、四角形だけではなく
SVGで図形を表示する要素はすべて同様です。
SVGで四角形を表示するにはrect要素を使い、、下記のような
属性を使い四角形を書きます。

rect要素

<rect x=”X座標” y=”Y座標” width=”幅” height=”高さ” >

最低限、上記の4つの属性を設定しないと四角は表示されません。
D3.jsで棒グラフを表示するときは、rect要素を生成し、これら
4つの属性人値をせってします。
SVGの座標はコンピューターの一般的な座標の考えと同じで、
左上が原点となり右にいくほど座標値が大きくなります。

コメント

タイトルとURLをコピーしました