たれぱんのびぼーろく

わたしの備忘録、生物学とプログラミングが多いかも

SVG (とD3.js) で線を描く

基本はSVG path.
d3-shapeはpathの作成を簡単にしてくれる

SVG path要素

とても自由度の高いpath.
d属性にコマンドを設定すればかなり自由な線が引ける

developer.mozilla.org

d3-shape

de-shape: d3.jsライブラリ群のひとつ。
SVG path要素のd属性ジェネレータUtilityを提供してくれる。

d3でpath要素のselectionにデータを付け、このデータに基づいてpathを作成できる. 別手法でcanvasにも可.

path.datum(data).attr("d", line);

This line generator can then be used to compute the d attribute of an SVG path element:
path.datum(data).attr("d", line);

github.com

例:

Connected Dots - bl.ocks.org