d3.js svg 简介——迹忆客-ag捕鱼王app官网

svg 代表可缩放矢量图形。svg 是一种基于 xml 的矢量图形格式。它提供了绘制不同形状的选项，例如直线、矩形、圆形、椭圆等。因此，使用 svg 可视化设计可为我们提供更多功能，并且设计更加灵活。

svg的特点

svg 的一些显着特点如下

• svg 是一种基于矢量的图像格式，它是基于文本的。
• svg 在结构上类似于 html。
• svg 可以表示为document 对象模型。
• svg 属性可以指定为属性。
• svg 应该具有相对于原点 (0, 0) 的绝对位置。
• svg 可以按原样包含在 html 文档中。

一个最小的例子

让我们创建一个最小的 svg 图像并将其包含在 html 文档中。

步骤 1 - 创建一个 svg 图像并将宽度设置为 300 像素，将高度设置为 300 像素。

在这里，svg标签开始一个 svg 图像，它具有宽度和高度作为属性。svg 格式的默认单位是像素(px)。

步骤 2 - 创建一条从 (100, 100) 开始到 (200, 100) 结束的线，并为该线设置红色。

这里，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，如下所示

上述程序将产生以下结果。

使用 d3.js 的 svg

要使用 d3.js 创建 svg，让我们按照下面给出的步骤操作。

步骤 1 - 创建一个容器来保存 svg 图像，如下所示。

步骤 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);

完整的代码如下

上述程序将产生以下结果。

矩形元素

矩形由标签表示，如下所示。

矩形的属性如下 -

• x - 这是矩形左上角的 x 坐标。
• y - 这是矩形左上角的 y 坐标。
• width - 这表示矩形的宽度。
• height - 这表示矩形的高度。

svg 中的一个简单矩形定义如下。

可以使用以下代码动态创建矩形。

上述程序将显示如下结果

圆形元素

圆形由标签表示，如下所述。

圆的属性如下 -

• cx - 这是圆心的 x 坐标。
• cy - 这是圆心的 y 坐标。
• r - 这表示圆的半径。

下面描述了 svg 中的一个简单圆圈。

可以使用以下代码动态创建矩形。

上述程序将显示如下结果

椭圆元素

svg ellipse 元素由标签表示，如下所述。

椭圆的属性如下 -

• cx - 这是椭圆中心的 x 坐标。
• cy - 这是椭圆中心的 y 坐标。
• rx - 这是圆的 x 半径。
• ry - 这是圆的 y 半径。

下面描述了 svg 中的一个简单椭圆。

可以动态创建相同的椭圆，如下所示

上述程序将显示如下结果