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>
 <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>
 <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>
 <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>
 <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>
 <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>
 <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>
 <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>
 <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>