海しるで色んな図形を描けるけれど、ユーザーデータの流れの矢印を描くことはできない。作図ができるJavaScriptライブラリのd3.jsでは地図を描けるみたいだけど、矢印は標準では図形として持っていないらしい。
d3.jsはグラフを描画するライブラリではなく、データを処理してどこに何を描画すべきか座標や幅で返す機能を持っている。HTMLのSVG要素にその座標を渡して、SVGで作図している。
上の記事は全然超初心者向けじゃないよ！というのはさておき、矢印を描くためには、d3.jsを直接学ぶより、SVGで遊んでからd3.jsをやるのがよさそう。
それに、d3.jsはv3からv4への更新で、名前空間が大きく変わって、それまでのコードがそのまま使えないらしい…。上のQiitaの記事も、下で参照している古旗本も、v3。しかも、今はv7。
ということで、d3.jsはちょっとおいといて、表題のとおりSVGで矢印を作ってみる。
SVGはhtmlのbodyにそのまま書く。
古旗一浩著「データビジュアライゼーションのためのD3.js徹底入門」によれば、SVGの図形要素のなかにはpathがある。path要素で指定できる属性はdで、ここにパスデータを入れる。d属性で指定できる命令と座標値のうち移動と直線描画に関する命令は以下のとおり。
| 命令の種類 | 命令 | 座標値 |
|---|---|---|
| 移動 | M | 絶対X座標, 絶対Y座標 |
| 移動 | m | 相対X座標, 相対Y座標 |
| 直線描画 | L | 絶対X座標, 絶対Y座標 |
| 直線描画 | l | 相対X座標, 相対Y座標 |
矢の元に絶対座標で最初に移動して、そこから、矢の先、三角形の順に相対座標で直線描画して一筆書きをするかなあ、と思っていたけれど、線を太くするとパスの最後が鋭くならないので、不採用。
不採用のコード
<svg>
<path d="M180,70 l0,-50 l-20,20 l40,0 l-20,-20" style="fill:rgb(0, 0, 0);stroke:rgb(0, 0, 0);stroke-width:3px" />
</svg>
矢印の三角形の三つの角全てが、直線描画の途中にあれば、たぶん全部鋭くなって、この問題は解決する。だから、パスを三角形の真ん中にも増やして、三つの角全てを回った後、ここをパスの終点にすることにした。
それと、流れの図っぽい形に少し調整。色もちょっと変えた。
<path d="M280,80 l0,-30 l15,0 l-15,-30 l-15,30 l15,0" style="fill:rgb(255, 85, 0);stroke:rgb(255, 85, 0);stroke-width:10px" />
ちなみに、pathの頂点はこんな感じ。
SVGでは図形の移動もできるらしい。path属性にtransform属性を指定する。transform属性には回転がある。ちなみに本では複数の図形要素をまとめたg要素に対してtransform属性を指定していたので、何に対しても使える。
| 機能 | 説明 |
|---|---|
| rotate(d)またはrotate(d,cx,cy) | 回転。dは角度、cxは中心X座標、cyは中心Y座標。 |
<path d="M90,320 l0,-30 l15,0 l-15,-30 l-15,30 l15,0" transform="rotate(45,90,290)" style="fill:rgb(255, 85, 0);stroke:rgb(255, 85, 0);stroke-width:10px" />
45度回転させてみる。
いいものができそう！