初识D3&svg初始图形元素

D3是一个javascript的函数库,用来做数据可视化的

优势

1. 数据能够与DOM绑定在一起
   D3能够将数据与DOM绑定在一起,使数据与图形成为一个整体,即图形有数据,数据有图形,生成图形和改变图形,就可以方便的根据数据进行操作
2. 数据转换和绘制是独立的
3. 代码简洁
4. 大量布局
5. 基于svg,缩放不会损失精度

数据可视化构成元素

• 坐标
  
• 大小
  
• 颜色
• 标签
  
• 关联
  

图表分类

• 柱状图 – 更直观的展示数据
• 散点图 – 将二维数据分别对应x轴,y轴,在将三维用点表示
• 折线图 – 折线图比较适合连续的数据,柱状图适合离散数据,折线图适合大量数据,折线图表示多个数据集之间的转换
• 饼状图 – 用来表示全体值的百分比
• 弦图 – 表示节点之间的关系
• 力导向图 – 适合描述大量顶点间的关系,各顶点之间具有相互的作用力
• 数状图 – 用于表示层级,上下级,包含与被包含关系
• 打包图 – 用于表示包含和被包含关系,也可以表示对各对象的权重
• 分区图 – 包含与被包含的关系,很想硬盘分区

DOM操作

innerHTML
innerText
outerHTML
outerText
nodeName: 节点名称
parentName: 父节点
childNodes: 子节点
nextSIbling: 下一个同胞节点
previousSibling: 上一个同胞节点
style: 元素的样式
appendChild: 给父节点添加子节点
removeChild: 移除子节点

// 事件
onload: 页面或图片加载完成时
onclick: 鼠标单击
ondblclick: 鼠标双击
onkeydown: 键盘按下
onkeypress: 键盘某个键按下并松开
onkeyup: 键盘某个键松开
onmousedown: 鼠标按钮按下
onmousemove: 鼠标移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素上
onmouseup: 鼠标松开

svg

svg用于描述二维矢量图的一种格式,xml格式来定义图形

• 位图: 放大失真,锯齿效果
• 矢量图: 不失真,不影响品质

svg的图形元素

• 矩形

/**
x: 左上角x坐标
y: 左上角y坐标
width: 矩形宽度
height: 矩形高度
rx: 圆角矩形,在x方向的半径
ry: 圆角矩形,在y方向的半径
*/
<svg>
<rect width="200" height="100" x="100" y="100" rx="30" ry="30" style="fill:yellow;storke:black;stroke-width:4;opacity:0.5"></rect>
</svg>

• 圆形和椭圆形

/**
圆形
cx: 圆心x坐标
cy: 圆心y坐标
r: 圆的半径
*/
<svg>
	<circle cx="150" cy="150" r="80" style="fill:yellow; stroke:black;stroke-width:4"></circle>
</svg>
/**
椭圆形
cx: 圆心x坐标
cy: 圆心y坐标
rx: 椭圆的水平半径
ry: 椭圆的垂直半径
*/
<svg>
	<ellipse cx="350" cy="150" rx="110" ry="80" style="fill:yellow; stroke:black;stroke-width:4"></ellipse>
</svg>

• 线段

/**
x1: 起点的x坐标
y1: 起点的y坐标
x2: 终点的x坐标
y2: 终点的y坐标
*/
<svg>
	<line x1="20" y1="20" x2="100" y2="200" style="stroke:black;stroke-width:4"></line>
</svg>

• 多边形和折线

/**
多边形
*/
<svg>
	<polygon points="100,20 20,90 60,160 140,160 180,90" style="fill:LawnGreen;stroke:black;stroke-width:3"/>
</svg>
// 折线: 不封闭
<svg>
	<polygonline points="100,20 20,90 60,160 140,160 180,90" style="fill:LawnGreen;stroke:black;stroke-width:3"/>
</svg>

• 路径

/**
路径类似折线,给出一个坐标点,在坐标点前加一个英文字母,表示如何运动到此坐标点
移动类
M(moveto): 将画笔移动到指定坐标
直线类
L(lineto): 画直线到指定坐标
H(horizontal lineto): 画水平直线到指定坐标
V(vertical lineto): 画垂直直线到指定坐标
曲线类
C(curveto): 画三次贝塞尔曲线,经两个控制点到达终点坐标
S(shorthand/smooth curveto): 与前一条三次贝塞尔曲线相连,第一个控制点为前一条曲线第二个控制点的对称点,只需要输入第二个控制点和终点,即可绘制一个三次贝塞尔曲线
Q: 画二次贝塞尔曲线,经过一个控制点到达终点坐标
T: 与前一个相连,只需要输入终点,即可绘制二次贝塞尔曲线
弧线类
A: 画椭圆曲线到指定坐标
闭合类
Z: 绘制一条直线连接终点和起点

// 大写表示坐标系中绝对坐标,小写表示相对坐标
*/

<svg>
	<path d="m30,100 L270,300"></path>
	<path d="m30,100 H270"></path>
	<path d="m30,100 V300"></path>
</svg>
// 三次贝塞尔
<svg>
	<path d="m30,100 C100,20 190,20 270,100"/>
</svg>
<svg>
	<path d="m30,100 C100,20 190,20 270,100 S400,180 450,100"/>
</svg>
// 二次贝塞尔
<svg>
	<path d="m30,100 Q190,20 270,100 T450,100"/>
</svg>

• 弧线

/**
rx: 椭圆x方向半轴大小
ry: 椭圆y方向半轴大小
x-axis-rotation: 椭圆x轴与水平逆时针夹角
large-arc-flag: 1表示大角度弧线,0表示小角度弧线
sweep-flag: 1顺时针到终点,0逆时针到终点
x: 终点x坐标
y: 终点y坐标
*/
<svg>
	<path d="M100,200 a200,150 0 1,0 150,-150 Z">
</svg>
// a小写表示相对位置,画笔100,200 终点位置250,50 x,y半径为200,150 夹角0 大角度,逆时针 Z表示闭合

• 文字

/**
text绘制文字
x: 文字x坐标
y: 文字y坐标
dx: 相对于当前位置x方向上平移的距离
dy: 相对于当前位置y方向上平移的距离
textLength: 文字的显示长度
rotate: 选择角度
*/
// 200,150位置,向左5个单位,向上10个单位,顺时针180,文字长度90
<svg>
    <text x="200" y="150" dx="-5" dy="-10" rotate="180" textLength="90">I love 3D</text>
</svg>

样式

fill: 填充色
stroke: 轮廓线颜色
stroke-width: 轮廓线宽度
stroke-linecap: 线头端点的样式
stroke-dasharray:虚线的样式
opacity: 透明度
font-family: 字体
font-size: 字体大小
font-weight: 字重
font-style: 字体样式
text-decoration: 上划线,下划线

标记

/**
viewBox: 坐标系区域
refX,refY: 在viewBox内的基准点
markerUnits: 标记大小的基准,strokeWidth(线的宽度)和userSpaceONUse(线前端的大小)
markerWidth,markerHeight: 标识的大小
orient: 绘制方向
id: 标识的id
*/
<defs>
	<marker id="arrow"
			markerUnits="strokeWidth"
			markerWidth="12"
			markerHeight="12"
			viewBox="0 0 12 12"
			refX = "6"
			refY = "6"
			orient="auto"	
	>
		<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000000" />
	</marker>
</defs>
// 直线箭头
 <line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"></line>
 /**
marker-start: 路径起点
marker-mid: 路径中间端点
marker-end: 路径终点处
*/
<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)"
       marker-mid="url(#arrow)" marker-end="url(#arrow)" />

滤镜

/**
in: 使用滤镜的对象,此处是源图像SourceGraphic
stdDeviation: 高斯模糊的参数
*/
<svg>
   <defs>
       <filter id="GaussianBlur">
           <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
       </filter>
   </defs>
   <rect x="0" y="0" width="150" height="100" style="fill:blue" filter="url(#GaussianBlur)" />
</svg>

渐变

/**
x1,y1,x2,y2 定义渐变方向
offset 定义渐变开始位置
stop-color 定义位置的颜色
*/
<svg>
  	<defs>
         <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stop-color="#f00"></stop>
             <stop offset="100%" stop-color="#0ff"></stop>
         </linearGradient>
     </defs>
     <rect fill="url(#myGradient)" x="10" y="10" width="300" height="100"></rect>
 </svg>