D3.js关于SVG

SVG是一种基于XML的矢量图格式。它提供了绘制不同形状的选项，如直线，矩形，圆形，椭圆等。
## SVG功能
SVG有如下特征：
- SVG是基于XML的矢量图片格式，是基于文本的。
- SVG在格式上和HTML相似。
- SVG可以表示为DOM。
- 可以将SVG属性指定为属性。
- SVG应该具有相对于（0,0）的绝对位置。
- SVG可以包含在HTML中。

## SVG形状
SVG中预定义了一些图形供开发者直接使用：
- 矩形 `<rect>`
- 圆形 `<circle>`
- 椭圆`<ellipse>`
- 线 `<line>`
- 折线 `<polyline>`
- 多边形 `<polygon>`
- 路径 `<path>`

### （1）矩形元素：
rect用于定义矩形，以及矩形的变种。
rect的属性：
- width属性可定义矩形的宽度。
- height属性可定义矩形的高度度。
- x属性可定义矩形距离SVG左上角（即（0,0））位置的横向距离。
- y属性可定义矩形距离SVG左上角（即（0,0））位置的纵向距离。
- rx属性可定义矩形横向产生圆角。
- ry属性可定义矩形纵向产生圆角。

css属性：
- fill属性可定义矩形内部的颜色。
- stroke属性可定义矩形边框的颜色。
- stroke-width属性可定义矩形边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html

<html>
 <head>
 </head>
 <body>
  <svg width="500" height ="600">
   <rect width="100" //定义矩形宽度。
   height="100" //定义矩形高度。
   rx="100" //定义矩形横向产生圆角。
   ry="10" //定义矩形纵向产生圆角。
   x="100" //定义矩形距离（0,0）位置的横向距离。
   y="100" //定义矩形距离（0,0）位置的纵向距离。
   style="
   fill:rbg(0,0,0);//定义矩形的填充颜色。
   stroke-width:10px;//定义矩形的边框宽度。
   stroke:red;//定义矩形的边框颜色。
   fill-opacity:0.5;//定义矩形的填充颜色的透明度。
   stroke-opacity:0.5;//定义笔触颜色的透明度。
   opacity:0.5;//定义整个矩形的透明度。
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><rect width="100" height="100" rx="100" ry="10"  x="100" y="30" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

### （2）圆形元素
circle用于定义圆形。
circle的属性：
- cx定义圆点的横坐标位置。
- cy定义圆点的纵坐标位置。
- r定义半径长度。

css属性：
- fill属性可定义圆形内部的颜色。
- stroke属性可定义圆形边框的颜色。
- stroke-width属性可定义圆形边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <circle cx="100"
   cy="100" 
   r="90" 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><circle cx="100"cy="100" r="90" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

### （3）椭圆元素
ellipse用于定义椭圆。
ellipse的属性：
- cx属性定义圆点的横坐标。
- cy属性定义圆点的纵坐标。
- rx属性定义水平半径。
- ry属性定义垂直半径。

css属性：
- fill属性可定义椭圆内部的颜色。
- stroke属性可定义椭圆边框的颜色。
- stroke-width属性可定义椭圆边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <ellipse cx="100"cy="100" rx="50" ry="90" 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><ellipse cx="100"cy="100" rx="50" ry="90" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

### （4）线条元素
line用于定义线条。
line的属性：
- x1属性在 x 轴定义线条的开始。
- y1属性在 y 轴定义线条的开始。
- x2属性在 x 轴定义线条的结束。
- y2属性在 y 轴定义线条的结束。

css属性：
- fill属性可定义线条内部的颜色。
- stroke属性可定义线条边框的颜色。
- stroke-width属性可定义线条边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <line x1="0" y1="0" x2="90" y2="90" 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><line x1="0" y1="0" x2="90" y2="90" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

### （5）多边形元素
polygon标签用来创建含有不少于三个边的图形。
polygon的属性：
- points用于定义每个角的横坐标和纵坐标。如：`points="0,0 90,90 10,90"`

css属性：
- fill属性可定义多边形内部的颜色。
- stroke属性可定义多边形边框的颜色。
- stroke-width属性可定义多边形边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <polygon points="10,10 90,90 10,90 " 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><polygon points="10,10 90,90 10,90 " style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

### （6）折线元素
polyline标签用来创建仅包含直线的形状。（即折线）
polyline的属性：
- points用来定义折线的起始(终止)位置每个线段连接处的位置。

css属性：
- fill属性可定义折线内部的颜色。
- stroke属性可定义折线边框的颜色。
- stroke-width属性可定义折线边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <polyline points="10,10 30,70 90,90 120,30" 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><polyline points="10,10 30,70 90,90 120,30" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0;stroke-opacity:1;opacity:1;"></svg>

### （7）路径元素
path标签用来定义路径。
path标签的本质是利用路径来绘制不同的图形，从而达到高自定义化。
path的属性：
- d属性用来定义path的路径起始，经过和终止。
d属性的值以及表示意义：
下面的命令可用于路径数据：
- M = moveto 路径起始值
- L = lineto 直线线条
- H = horizontal lineto 水平线条
- V = vertical lineto 垂直线条
- C = curveto 曲线
- S = smooth curveto 光滑的曲线
- Q = quadratic Belzier curve 二次贝塞尔曲线
- T = smooth quadratic Belzier curveto 光滑的二次贝塞尔曲线
- A = elliptical Arc 椭圆弧
- Z = closepath 路径关闭

css属性：
- fill属性可定义路径内部的颜色。
- stroke属性可定义路径边框的颜色。
- stroke-width属性可定义路径边框的宽度。
- fill-opacity属性可定义填充颜色透明度（合法的范围是：0 - 1）
- stroke-opacity属性可定义笔触颜色的透明度（合法的范围是：0 - 1）
- opacity属性可定义整个元素的透明值（合法的范围是：0 - 1）

示例：

```html
<html>
 <head>
 </head>
 <body>
  <svg width="210" height ="210">
   <path d="M0,0 L30,70 L90,90 L120,30 Z" 
   style="
   fill:rbg(0,0,0);
   stroke-width:10px;
   stroke:red;
   fill-opacity:0.5;
   stroke-opacity:0.5;
   opacity:0.5;
   ">
  </svg>
 </body>
</html>
```
代码实际效果如下：
<svg width="210" height ="210"><path d="M0,0 L30,70 L90,90 L120,30 Z" style="fill:rbg(0,0,0);stroke-width:10px;stroke:red;fill-opacity:0.5;stroke-opacity:0.5;opacity:0.5;"></svg>

## D3.js使用SVG
步骤如下：
1.创建一个容器来保存SVG图像
2.使用select（）方法选择SVG容器，并使用append（）方法注入SVG元素。 使用attr（）和style（）方法添加属性和样式。
3.使用同样的方法在svg容器中添加需要的图形元素以及属性和样式。
示例：

```html
<html>
 <head>
  <script src="https://d3js.org/d3.v6.js"></script>
 </head>
 <body>
  <div id="one"></div>
  <script>
   var width = 210;
   var height = 210;
   var o = d3.select("body").selectAll("#one");
   var s = o.append("svg").attr("width",width).attr("height",height);
   var t = s.append("line").attr("x1",10).attr("y1",10).attr("x2",90).attr("y2",90).style("stroke","red").style("stroke-width",10);
  </script>
 </body>
</html>
```

D3.js关于SVG

D3.js关于SVG(2)

D3.js数据集

一代明君

Comments | NOTHING