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 图像，它具有宽度和高度作为属性。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 属性使用笔画和笔画宽度样式设置线条的颜色和粗细。
x1 - 这是第一个点的 x 坐标。
y1 - 这是第一个点的 y 坐标。
x2 - 这是第二个点的 x 坐标。
y2 - 这是第二个点的 y 坐标。
stroke - 线条的颜色。
笔画宽度- 线条的粗细。
第 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);Step 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>上面的代码将产生以下结果。
