莽夫前段时间碰到个需求用到了, 当时赶着完成需求学的仓促. 系统的回头学习学习.
D3 基本知识
工作步骤
D3 可以根据数据生成和操作 web 文档. 主要包含以下步骤:
- 把数据加载到浏览器内存里
- 把数据与文档中的元素绑定, 根据需要创建新元素
- 解析每个元素的约束边界数据并为其设置相应的视觉属性, 实现元素的变换
- 根据用户的输入实现元素状态的过渡
简单形状绘制
矩形 rect
1 | <rect x="0" y="0" width="500" height="50" /> |
圆形 circle
1 | <circle cx="250" cy="25" r="25" fill="blue" stroke="gray" stroke-width="10" /> |
椭圆 ellipse
1 | <ellipse cx="250" cy="25" rx="100" ry="25" /> |
直线 line
1 | <line x1="0" y1="0" x2="500" y2="50" stroke="black" /> |
文本 text
1 | <text x="250" y="25" font-family="serif" font-size="25" fill="gray" |
SVG 元素的样式
fill 背景颜色
颜色值. 与 CSS 用法一样，可以使用颜色名、十六进制值，或 RGB、RGBA 值。
stroke 边框颜色
颜色值. 边框
stroke-width 边框宽度
带单位的数值(通常单位是像素), 边框宽度
opacity 透明度
0.0(完全透明) ~ 1.0(完全不透明) 之间的数值
font-family 字体
仅 text 元素可用
font-size 字体大小
仅 text 元素可用
分层与绘制顺序
SVG 没有”层”和深度的概念, 也不支持 CSS 的 z-index 属性
如果绘制多个形状, 元素出现的顺序决定了它们的深度次序. 先绘制的在最下面
关于兼容性
支持 SVG 的浏览器都兼容. IE >=9.
