D3.js-SVG简介
SVG代表可伸缩矢量图形。 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图像，并且具有width和height作为属性。 SVG格式的默认单位是pixel 。
步骤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表示终点。样式属性使用笔触和笔触宽度样式设置线条的颜色和粗细。
-
x1-这是第一个点的x坐标。
-
y1-这是第一个点的y坐标。
-
x2-这是第二点的x坐标。
-
y2-这是第二点的y坐标。
-
stroke-线条的颜色。
-
笔划宽度-线的粗细。
步骤3-创建一个HTML文档“ svg_line.html”，并集成上述SVG，如下所示-
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
<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"></line>
</svg>
</div>
<p></p>
<p></p>
上面的程序将产生以下结果。
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);
完整的代码如下-
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
<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>
上面的代码产生以下结果。
矩形元素
矩形由<rect>标记表示，如下所示。
<rect x="20" y="20" width="300" height="300"></rect>
矩形的属性如下-
-
x-这是矩形左上角的x坐标。
-
y-这是矩形左上角的y坐标。
-
宽度-这表示矩形的宽度。
-
高度-这表示矩形的高度。
SVG中的简单矩形定义如下。
<svg width="300" height="300">
<rect x="20" y="20" width="300" height="300" fill="green"></rect>
</svg>
可以如下所述动态创建相同的矩形。
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<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>
上面的代码将产生以下结果。
圆元素
圆由<circle>标记表示，如下所述。
<circle cx="200" cy="50" r="20"></circle>
圆的属性如下-
-
cx-这是圆心的x坐标。
-
cy-这是圆心的y坐标。
-
r-这表示圆的半径。
SVG中的一个简单圆圈如下所述。
<svg width="300" height="300">
<circle cx="200" cy="50" r="20" fill="green"></circle>
</svg>
可以如下所述动态创建相同的圆。
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<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>
上面的代码将产生以下结果。
椭圆元素
SVG Ellipse元素由<ellipse>标签表示，如下所述。
<ellipse cx="200" cy="50" rx="100" ry="50"></ellipse>
椭圆的属性如下-
-
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"></ellipse>
</svg>
可以如下动态创建相同的椭圆，
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<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>
上面的代码将产生以下结果。