D3.js - SVG 簡介
SVG 代表 Scalable Vector Graphics。SVG 是一種基於 XML 的向量圖形格式。它提供了繪製不同形狀的選項,如直線,矩形,圓形,橢圓等。因此,使用 SVG 設計視覺化為你提供更多功能和靈活性。
SVG 的功能
SVG 的一些顯著特徵如下 -
- SVG 是基於向量的影象格式,它是基於文字的。
- SVG 在結構上與 HTML 類似。
- SVG 可以表示為 Document 物件模型。
- 可以將 SVG 屬性指定為屬性。
- SVG 應該具有相對於原點(0,0)的絕對位置。
- SVG 可以包含在 HTML 文件中。
一個最小例子
讓我們建立一個最小的 SVG 影象並將其包含在 HTML 文件中。
步驟 1 - 建立 SVG 影象並將寬度設定為 300 畫素,高度設定為 300 畫素。
<svg width = "300" height = "300">
</svg>
這裡,svg 標籤啟動 SVG 影象,它具有寬度和高度作為屬性。SVG 格式的預設單位是畫素。
步驟 2 - 建立一條從(100,100)開始到(200,100)結束的行,併為該行設定紅色。
<line x1 = "100" y1 = "100" x2 = "200" y2 = "200"
style = "stroke:rgb(255,0,0);stroke-width:2"/>
這裡,line
標籤繪製一條線,其屬性 x1,y1 指的是起始點,x2,y2 指的是終點。style 屬性使用 stroke
和 stroke-width
樣式設定線條的顏色和粗細。
-
x1 - 這是第一個點的 x 座標。
-
y1 - 這是第一個點的 y 座標。
-
x2 - 這是第二個點的 x 座標。
-
y2 - 這是第二個點的 y 座標。
-
stroke - 線條的顏色。
-
stroke-width - 線的粗細。
步驟 3 - 建立一個 HTML 文件“svg_line.html”並整合上面的 SVG,如下所示 -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
<svg width = "300" height = "300">
<line x1 = "100" y1 = "100"
x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
stroke-width:2"/>
</svg>
</div>
<p></p>
<p></p>
</body>
</html>
上述程式將產生以下結果。
SVG 使用 D3.js
要使用 D3.js 建立 SVG,請按照下面給出的步驟操作。
步驟 1 - 建立一個容器來儲存 SVG 影象,如下所示。
<div id = "svgcontainer"></div>
步驟 2 - 使用 select()
方法選擇 SVG 容器,並使用 append()
方法注入 SVG 元素。使用 attr()
和 style()
方法新增屬性和樣式。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg").attr("width", width).attr("height", height);
步驟 3 - 同樣,在 svg 元素中新增 line 元素,如下所示。
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
完整的程式碼如下 -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
</div>
<script language = "javascript">
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
</script>
</body>
</html>
上面的程式碼產生以下結果。
矩形元素
矩形由 <rect> 標記表示,如下所示。
<rect x = "20" y = "20" width = "300" height = "300"></rect>
矩形的屬性如下 -
-
x - 這是矩形左上角的 x 座標。
-
y - 這是矩形左上角的 y 座標。
-
width - 這表示矩形的寬度。
-
height - 表示矩形的高度。
SVG 中的簡單矩形定義如下。
<svg width = "300" height = "300">
<rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
</svg>
可以如下所述動態建立相同的矩形。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
//Create and append rectangle element
svg.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 200)
.attr("height", 100)
.attr("fill", "green");
</script>
</body>
</html>
上面的程式碼將產生以下結果。
圓元素
圓圈由 <circle> 標籤表示,如下所述。
<circle cx = "200" cy = "50" r = "20"/>
圓的屬性如下 -
-
cx - 這是圓心的 x 座標。
-
cy - 這是圓心的 y 座標。
-
r - 這表示圓的半徑。
下面描述 SVG 中的簡單圓圈。
<svg width = "300" height = "300">
<circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>
可以如下所述動態建立相同的圓圈。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
//Append circle
svg.append("circle")
.attr("cx", 200)
.attr("cy", 50)
.attr("r", 20)
.attr("fill", "green");
</script>
</body>
</html>
上面的程式碼將產生以下結果。
橢圓元素
SVG Ellipse 元素由 <ellipse> 標記表示,如下所述。
<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>
橢圓的屬性如下 -
-
cx - 這是橢圓中心的 x 座標。
-
cy - 這是橢圓中心的 y 座標。
-
rx - 這是圓的 x 半徑。
-
ry - 這是圓的 y 半徑。
下面描述 SVG 中的簡單橢圓。
<svg width = "300" height = "300">
<ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>
可以動態建立相同的橢圓,如下所示,
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("ellipse")
.attr("cx", 200)
.attr("cy", 50)
.attr("rx", 100)
.attr("ry", 50)
.attr("fill", "green")
</script>
</body>
</html>
上面的程式碼將產生以下結果。