使用 D3 畫個圓形也是一樣只要插入 circle 標籤就可以了。
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 circle svg.append('circle').attr('cx', 60).attr('cy', 60).attr('r', 50); }); |
接著讓我們多插入幾個圓形及自訂不同的樣式:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(function(){ // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 circle svg.append('circle').attr({ cx: 60, cy: 60, r: 50 }).style({ fill: 'steelblue', stroke: 'green', 'stroke-width': 10 }); // 在 svg 中插入 circle svg.append('circle').attr({ cx: 160, cy: 60, r: 20 }).style({ fill: 'steelblue', stroke: 'green', 'stroke-width': 10, 'fill-opacity': .5 }); // 在 svg 中插入 circle svg.append('circle').attr({ cx: 210, cy: 60, r: 10 }).style({ fill: 'steelblue', stroke: 'green', 'stroke-width': 5, opacity: .5 }); }); |
circle 標籤的屬性及說明可以參考:SVG 基本圖形 - 圓形 circle