D3.js SVG 简介
SVG 代表
可缩放矢量图形。 SVG 是一种基于 XML 的矢量图形格式。它提供了绘制不同形状(例如直线、矩形、圆形、椭圆等)的选项。因此,使用 SVG 设计可视化可为您提供更多功能和灵活性。
SVG 的特点
SVG 的一些显着特征如下-
SVG 是一种基于矢量的图像格式,它是基于文本的。
SVG 在结构上类似于 HTML。
SVG 可以表示为文档对象模型。
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>
上述程序将产生以下结果。
使用 D3.js 的 SVG
要使用 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 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 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 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>
以上代码将产生以下结果。