たれぱんのびぼーろく

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

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

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

SVG path要素

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

developer.mozilla.org

d3-shape

SVG path要素のd属性コンストラクタになる
d3でpath要素のselectionにデータを付け、このデータに基づいてpathを作成できる

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