■ はじめに
https://dk521123.hatenablog.com/entry/2015/10/07/000426
の D3.jsでは、SVG要素を知ってた方が理解し易いので 今回は、SVG要素を扱う。
目次
【１】SVG (Scalable Vector Graphics) 【２】サンプル 例１：簡単な棒グラフ 【３】SVG要素と図形 １）text ２）line ３）rect ４）circle / ellipse ５）path ６）g ７）transform ８）animate / animateMotion
【１】SVG (Scalable Vector Graphics)
* XMLベースの2次元グラフィクス記述言語 * 基本的にはベクトル描画を行なう*1ベクターデータ * 以下が非常にまとまっている
http://thinkit.co.jp/story/2012/05/10/3529/page/0/1
http://thinkit.co.jp/story/2012/05/10/3529/page/0/2
【２】サンプル
* 以下をHTMLファイルで保存し、ブラウザで表示してみると、 svgの断片が見えてくる * 以下を読むといい
http://ja.d3js.info/alignedleft/tutorials/d3/an-svg-primer/
例１：簡単な棒グラフ
<svg width="500" height="50"> <rect x="10" y="0" width="20" height="50"/> <line x1="0" y1="50" x2="40" y2="50" stroke="black"/> </svg>
【３】SVG要素と図形
| # | 図形 | 要素 | 重要度 | 備考 |
|---|---|---|---|---|
| 1 | テキスト | text | ★★★ | 全般で使用 |
| 2 | 直線 | line | ★★★ | 折れ線グラフで使用 |
| 3 | 四角形 | rect | ★★★ | 棒グラフで使用 |
| 4 | 円 | circle | ★★★ | |
| 5 | 楕円 | ellipse | ★★★ | 円グラフで使用 |
| 6 | 連続直線 | polyline | ★☆☆ | |
| 7 | 多角形 | polygon | ★☆☆ |
１）text
| 属性 | 説明 |
|---|---|
| x | 文字表示開始位置のx座標。スペースを挟んで各文字の表示位置を個別に指定も可能 |
| y | 文字表示開始位置のy座標。スペースを挟んで各文字の表示位置を個別に指定も可能 |
| fill | 塗りつぶし色 |
| stroke | 線の色 |
２）line
| 属性 | 説明 |
|---|---|
| x1 | 始点のx座標 |
| y1 | 始点のy座標 |
| x2 | 終点のx座標 |
| y2 | 終点のy座標 |
| stroke | 線の色 |
３）rect
| 属性 | 説明 |
|---|---|
| x | 左上のx座標 |
| y | 左上のy座標 |
| width | 幅 |
| height | 高さ |
| rx | 角を丸める際の、楕円のx軸方向の径 |
| ry | 角を丸める際の、楕円のy軸方向の径 |
| fill | 塗りつぶし色 |
| stroke | 線の色 |
４）circle / ellipse
| 属性 | 説明 |
|---|---|
| cx | 円の中心のx座標 |
| cy | 円の中心のy座標 |
| r | 円の半径（circle要素） |
| rx | 楕円のx軸方向の径（ellipse要素） |
| ry | 楕円のy軸方向の径（ellipse要素） |
| fill | 塗りつぶし色 |
| stroke | 線の色 |
５）path
* ある地点から地点を指定して図形を描く
| 属性 | 説明 | 例 |
|---|---|---|
| d | 曲線を引く際のパスコマンドのパスデータを指定する | d="M 50,50 L 200,50 Z" |
path
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html
http://liginc.co.jp/web/html-css/html/154217
pathのd
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_03.htm
６）g
* グループ化
７）transform
* 位置や形状を操作する
| 属性 | 説明 |
|---|---|
| tranlate(x,y) | x分だけ横に、y分だけ縦に移動 |
| rotate(x) | 原点を中心にx度回転 |
http://dataisfun.org/2014/05/19/?p=276
８）animate / animateMotion
* アニメーション効果
https://developer.mozilla.org/ja/docs/Web/SVG/Element/animate
https://developer.mozilla.org/ja/docs/Web/SVG/Element/animateMotion
例１：四角形が動く
https://www.wakuwakubank.com/posts/628-svg-animation/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 70" width="200" height="70"> <rect width="30" height="30" x="20" y="20"> <animate attributeName="x" from="0" to="200" dur="1s" /> </rect> </svg>
関連記事
D3.js ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2015/10/07/000426
