SVG 中的基礎圖形(rect , line ,circle 等)以及在 D3.js 中的應用
在 D3.js 中,根據要展示的數據,我們挑選合適的 svg 中的基礎圖形,然後進行一系列的設置等,使其達到我們的要求.
這裏就把自己在使用 D3.js 繪製圖形的過程中,使用到的一些基本圖形記錄下來.
矩形 - rect
矩形在可視化的圖表中,可以用來展示柱狀圖以及柱狀堆積圖等.
現在來看一下在頁面中生成的這樣的圖形的 HTML 代碼是什麼:
<svg width="100" height="100" style="background-color: rgb(250, 251, 252);">
<rect x="10" y="10" width="24" height="80" fill="lightblue"></rect>
</svg>
通過代碼我們大概可以得出,畫出一個矩形,需要兩個步驟:
- 繪製 svg 容器
- 添加 rect 元素(表示矩形)
所以我們使用 D3.js 來繪製這樣的矩形的代碼就是:
initRect() {
let container = select(".b-rect");
let rectSvg = container.append('svg')
.attr('width',100)
.attr('height',100)
.style('background-color','#fafbfc');
rectSvg.append('rect')
.attr('x',10)
.attr('y',10)
.attr('width',24)
.attr('height',80)
.attr('fill','lightblue')
}
可以看出,代碼也是遵循的上文所說的兩步.
需要注意的是,我們如何控制一個 rect 元素的屬性,使其可以達到我們想要的樣式,那就需要修改 rect 元素的基本的四個屬性:
- x - 控制當前矩形(左上角)距離 svg 座標系的橫軸 0 點的距離;
- y - 控制當前矩形(左上角)距離 svg 座標系的縱軸 0 點的距離;
- width - 控制當前矩形的寬度.(D3.js 中可以使用 bandWidth 屬性獲取)
- height - 控制當前矩形的高度.
這四個屬性設置了之後,我們的矩形就出來了.進一步的設置樣式的話,需要使用其他的屬性,例如 fill 等.
注意 這裏需要特別注意的是 svg 中畫布的座標系:
可以看這個來自 MDN 的圖片.x 軸的正方向是 x 軸 0 點的位置水平向右. y 軸的正方向是 y 軸零點的位置垂直向下.
直線 - line
直線通常在可視化圖形中作爲圖例中線條的圖例而使用.
還是先來看一下直線在 HTML 代碼中是什麼樣的:
<svg width="100" height="100" style="background-color: #f8f9fa;">
<line x1="10" y1="10" x2="60" y2="60" stroke="lightblue" stroke-width="4"></line></svg>
同樣的,生成一條直線也是需要兩步:
- svg 容器
- line 元素
同樣的使用 D3.js 來繪製一條直線那就沒多大問題了:
initLine() {
let container = select(".b-line");
let rectSvg = container.append('svg')
.attr('width',100)
.attr('height',100)
.style('background-color','white');
rectSvg.append('line')
.attr('x1',10)
.attr('y1',10)
.attr('x2',60)
.attr('y2',60)
.attr('stroke',"lightblue")
.attr('stroke-width',4)
}
和上文中生成矩形的代碼大致相同,所以我們的關注點放在 line 元素必須屬性的相關設置:
- x1 / x2 - 直線起點/終點的 x 軸方向上的座標位置
- y1 / y2 - 直線起點/終點的 y 軸方向上的座標位置
- stroke-width - 直線的寬度
- stroke - 直線填充的顏色
其中 x1 / x2 / y1 / y2 爲 line 元素特有的屬性.
有了這四個屬性如果不添加 stroke 相關的屬性,直線還是不會在頁面中展示出來的.因爲直線在幾何中是一維的.
圓形 - circle
圓形在可視化中可以作爲散點圖中的氣泡等.
同樣,還是先看 circle 元素在 HTML 中的展現形式:
<svg width="100" height="100" style="background-color: rgb(250, 251, 252);">
<circle cx="50" cy="50" r="25" fill="lightblue"></circle>
</svg>
這次是使用的 svg 中的 cirlce 元素標籤.
那麼使用 D3.js 繪製一個這樣的圓形的代碼則是:
initCircle() {
let container = select(".b-circle");
let rectSvg = container.append('svg')
.attr('width',100)
.attr('height',100)
.style('background-color','#fafbfc');
rectSvg.append('circle')
.attr('cx',50)
.attr('cy',50)
.attr('r',25)
.attr('fill',"lightblue")
}
每個 svg 的圖形元素都會有自己的一些專有屬性,那屬於 circle 元素的專有屬性爲:
- cx - circle 的圓心 x 軸座標
- cy - circle 的圓心 y 軸座標
- r - circle 的半徑
那既然有 circle ,橢圓的畫法也就很明瞭了:
橢圓 - ellipse
由於跟 circle 相差不大,所以直接上相關的代碼:
<svg width="100" height="100" style="background-color: rgb(250, 251, 252);">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="lightblue"></ellipse>
</svg>
使用 D3.js 來生成這樣的圖形的代碼則是:
initEllipse() {
let container = select(".b-ellipse");
let rectSvg = container.append('svg')
.attr('width',100)
.attr('height',100)
.style('background-color','#fafbfc');
rectSvg.append('ellipse')
.attr('cx',50)
.attr('cy',50)
.attr('rx',30)
.attr('ry',20)
.attr('fill',"lightblue")
}
橢圓的相關屬性:
- cx / cy 同 circle 中的相應屬性
- rx / ry 也是很好理解,對應橢圓 x / y 軸的長度,與數學上定義的橢圓一樣.
折現&多邊形 - polyline&polygon
這個在實際的生產中暫時沒有用到,就簡單的提一下:
<svg width="100" height="100" style="background-color: rgb(250, 251, 252);">
<polyline points="05,30 15,30 15,20 25,20 25,10 35,10" stroke-width="4" stroke="lightblue" fill="none"></polyline>
<polygon points="80,80 100,80 100,100 80,100" stroke-width="4" stroke="lightblue" fill="lightgreen"></polygon>
</svg>
看了代碼應該比較清楚.
但是在 D3.js 中是不會使用 <line> ,<polyline> 生成相關的折線圖的. D3.js 中使用的相關 API 是 d3.line ,而使用的 svg 元素則是 path. 詳情請查看d3.line .