D3js快速入门 - 1、svg基础

D3js

前言

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。我们在对SVG绘制的图形缩放的时候，图像是不会失真的。
SVG 使用 XML 格式定义图像，也就是说SVG遵循XML文档格式，它在浏览器上是以DOM形式存在，即文档对象模型（Document Object Model）。
D3.js是基于SVG而封装的，主要用于交互式数据可视化。所以我们在入门D3.js的时候，我们就要对SVG又一个全面基础的认识。
这篇文章中，SVG在HTML中使用的的形式是直接嵌入SVG代码，更多使用方式请点击链接

内置图形

1、矩形

示例代码

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

代码解析

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
  • rx 和 ry 属性可使矩形产生圆角
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

查看示例

2、圆形

示例代码

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

代码解析

  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
  • r属性定义圆的半径

查看示例

3、椭圆

示例代码

1
2
3
4
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

代码解析

  • CX属性定义的椭圆中心的x坐标
  • CY属性定义的椭圆中心的y坐标
  • RX属性定义的水平半径
  • RY属性定义的垂直半径

查看示例

4、直线

示例代码

1
2
3
4
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

代码解析

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

查看示例

5、曲线

示例代码

1
2
3
4
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

代码解析

  • points 属性定义多边形每个角的 x 和 y 坐标

查看示例

6、多边形

示例代码

1
2
3
4
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

代码解析

  • points 属性定义多边形每个角的 x 和 y 坐标

查看示例

7、路径

示例代码

1
2
3
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

代码解析

命令 名称 参数
M moveto  移动到 (x y)
Z closepath  关闭路径 (none)
L lineto  画线到 (x y)
H horizontal lineto  水平线到 x
V vertical lineto  垂直线到 y
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

查看示例

8、文本

示例代码

1
2
3
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">miSunLaughing</text>
</svg>

代码解析

  • x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）

查看示例

其它

1、stroke属性

SVG提供了一个范围广泛stroke 属性。这几个属性多用来定义线条的样式。

  • stroke. 线条颜色
  • stroke-width 线条粗细
  • stroke-linecap 线条闭合方式
  • stroke-dasharray 线条虚线数值组

2、定义和分组

定义可重用部件

1
<defs></defs>

使用g分组，被该元素包裹的dom，可以视为一个整体，可以定义统一的样式

1
<g></g>

使用引用在defs中定义的元素，还可在use上设置fill，stroke等属性。
更多知识请点击链接

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
       <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="red" stroke="purple" stroke-width="4" />
       <radialGradient id="irisGradient">
           <stop offset="25%" stop-color="green" />
           <stop offset="100%" stop-color="dodgerblue" />
       </radialGradient>
       <g id="eye">
           <ellipse cy="50" rx="50" ry="25" fill="none" stroke="black" />
           <circle cy="50" r="25" />
           <circle cy="50" r="10" fill="black" />
       </g>
    </defs>
    <g stroke="red" stroke-width="3">
        <ellipse cx="125" cy="50" rx="50" ry="25" fill="none" stroke="black" />
        <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
        <circle cx="125" cy="50" r="10" fill="black" />
        <use xlink:href="#eye" x="250" fill="dodgerblue" />
    </g>
</svg>

查看示例

3、事件

最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

示例代码

1
2
3
4
5
// html
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <polygon points="60,30 90,90 30,90" onclick="alert('hello')">
    </polygon> 
</svg>

查看示例

总结

1、svg遵循XML文档格式，所以所以我们能给其定义css、但同时要注意其每个图形独特的属性。
2、内置图形在同一位置的时候，默认的是空间向上重叠，可用z-index来理解，后来者居上。
3、我们能用js获取SVG的DOM，并对其进行相关操作。
4、定义和分组这两个概念，入手相对较难理解，但对使用D3.js开发的时候很有帮助。定义能减少我们的工作量，提高代码复用率。分组方便我们统一管理SVG中的内置图形。
5、SVG内置图形都有自己的坐标属性，正是这些属性，我们才能对内置图形做位置变化。
6、动画，SVG有自己的动画定义，但是个人不建议使用，因为我们完全可以使用CSS的动画来实现同样的功能。

参考文章

SVG中的结构化、分组和引用
svg基本教程
svg教程

svg

Related posts

D3js快速入门 - 5、坐标轴
D3js快速入门 - 6、图表绘制
D3js快速入门 - 4、比例尺