在 SVG 中加入路徑的方式是透過指定 path 標籤的 d 屬性來達成,同樣在 D3 中也是一樣。
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 path svg.append('path').attr('d', 'M50 150H200C150 0 450 0 400 150H550').style('fill', 'none').style('stroke', 'purple').style('stroke-width', 2); }); |
使用路徑來繪制是一件需要天份的事 XD:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 path svg.append('path').attr({ d: 'M50 150Q300 50 300 150T450 150' }).style({ fill: 'none', stroke: 'purple', 'stroke-width': 5 }); }); |
path 標籤的屬性及說明可以參考:SVG 基本圖形 - 路徑 path