D3入门

前言

在说D3之前，应该先了解svg，如果svg都不知道的话，可能d3在做什么你就很难懂了。所以我会先说一个SVG的入门，然后再讲D3

SVG简介

什么是SVG： SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 ，SVG 使用 XML 格式定义图形 。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

SVG 的历史和优势：
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改，比如记事本。
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印。
• SVG 可在图像质量不下降的情况下被放大。
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 是开放的标准
• SVG 文件是纯粹的 XML
• Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术

SVG元素

• rect : x="10" y="10" height="90" width="90" rx="5" ry="5"

x,y就是矩形左上角坐标，rx，ry就是矩形的圆角宽高。

• circle ： cx="50" cy="150" r="40"

cx、cy就是圆心坐标，r是半径

• ellipse ：cx="150" cy="150" rx="50" ry="30"

cx、cy就是圆心坐标，rx、ry就是圆的长宽两个半径

• line：x1="10" y1="200" x2="10" y2="300"

（x1,y1）是起点坐标，(x2,y2)是终点坐标。

• polyline：points="80,320 130,320 95,400 80,320"

points就是一系列的坐标点，从第一个点开始直线连接下一个点，直到结束。如果你想要图形封闭，可以把起始点再加在末尾。

• path: <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,11 L100,0" style="stroke:#660000; fill:none;"/>

path元素的所有绘图都在d属性中指定。d属性包含绘制命令。上面的例子中，M发出“移至”命令，A发出“弧”命令，L发出“线段”命令。这些命令都作用在一个“虚拟画笔”。这支笔可以移动，绘制形状等。

SVG坐标系

在SVG坐标系中，x=0,y=0点在左上角。与正常的图坐标系相比，y轴被反转。随着SVG中y的增加，点、形状等向下移动，而不是向上。

D3简介

D3 的全称是（Data-Driven Documents）, 顾名思义可以知道是一个被数据驱动的文档。D3.js是一个基于数据的操作文档的JavaScript库，可以让你绑定任何数据到DOM，支持DIV这种图案生成，也支持SVG这种图案的生成。D3帮助你屏蔽了浏览器差异，做出来图案的效果可以说是炫目得一塌糊涂，可是代码却很简洁。

模块划分

D3可以整个模块安装使用，也可以只安装你需要的模块
下面是我用过的几个模块
Arrays (Statistics, Search, Transformations, Histograms)
数组操作，排序，搜索，总结，统计数据，搜索，变换，直方图
Axes
创建坐标轴，以及坐标轴相关的设置，操作等。会创建相关dom元素
Brushes
刷子组件，选择区域用。会创建相关dom元素
Dragging
拖拽组件，用于实现拖拽事件
Scales (Continuous, Sequential, Quantize, Ordinal)
比例尺，会和坐标轴结合使用
Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
选择集
Transitions
过渡组件，用来定义一些过渡效果
Zooming
缩放组件

API

具体的API详解，稍等一下。。。。
API地址

简单例子

未完待续。。。😳