D3是一个javascript的函数库,用来做数据可视化的
优势
- 数据能够与DOM绑定在一起
D3能够将数据与DOM绑定在一起,使数据与图形成为一个整体,即图形有数据,数据有图形,生成图形和改变图形,就可以方便的根据数据进行操作 - 数据转换和绘制是独立的
- 代码简洁
- 大量布局
- 基于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>