2. 我为什么用D3？
1）结合HTML，SVG，CSS，D3可以图形化的，生动的展现数据。是目前最流行的数据可视化库，同时是Github上前端库排行第二（仅次于bootstrap）。
2）比Processing这样的底层绘图库更简单，比Echarts这样高度封装的图表库更自由。
3.D3的下载和使用
4.D3有哪些功能？
行为 - 可重用的交互行为。
核心 - 包括选择器，过渡，数据处理，本地化，颜色等。
地理 - 球面坐标，经纬度运算。
几何 - 提供绘制2D几何图形的实用工具。
布局 - 推导定位元素的辅助数据。
比例尺 - 数据编码和视觉编码之间转换。
可缩放矢量图形 - 提供用于创建可伸缩矢量图形的实用工具。
时间 - 解析或格式化时间，计算日历的时间间隔等。
二、添加元素
d3.select("body").append("p").text("小可爱!");
解析：
d3代表D3对象；
d3的select()方法通过使用CSS选择器的语法来选择DOM元素(如body)，并且选择的是第一个匹配的元素，使用 selectAll() 可以返回所有匹配元素。
append()方法是在所选择元素内的末尾加上元素(如p)，也即追加；
text()方法写入元素内容。
三、数据绑定
D3 一个很强大的特点是能将数据绑定到 DOM 上，也就是绑定到文档上。
例如网页中有段落元素 和一个整数 100，于是可以将整数 100 与 绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。
1. D3可以处理哪些类型的数据？
JS的数据类型。如数字，时间，字符串，布尔值，数组，对象等都可以。
D3自定义的数据类型。如集合（Set）,映射（Map）,嵌套（Nest）,及各种颜色空间（RGB，HSL，L*a*b，HSV）对象等
最常用的是数组，JSON。特殊的有CSV，GeoJSON数据等。
2.如何绑定？
D3 中是通过以下两个函数来绑定数据的：
datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
1）datum()
在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：
d 代表数据，也就是与某元素绑定的数据。
i 代表索引，代表数据的索引号，从 0 开始。
datum只是替换一组新的数据。
2)data()
3.代码解析
selectAll("p") //选择DOM中的所有段落。
data(dataset) //计数和分析我们的数据值。
有五个值，之后我们的数据集执行了5次，每个值一次。
enter() //绑定数据和DOM元素。
这个方法将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。
append("p") //追加元素
通过enter()创建的占位符 在DOM中插入一个p元素。
text(） //为新创建的p标签插入一个文本值。
四、使用数据
五、绘制条形图
1）attr("class","bar") //设置属性
2）d3.range(25) 生成25个数字：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]。当然我们没有用它生成的数字，而只是用它来循环。真正生成数字的地方在map函数里。（数组）
3）d3.map() //构建一个新的map
map函数，顾名思义映射，也就是生成一个对应该位置的一个数字（当然这里强大之处不仅仅是一个数字，还可以是对象）。（数组）
4）我们用d3.round函数对随机数保留一位小数四舍五入。（格式化）
5）我们用d3.random.normal(15,8)()生成一个满足期望是15，方差是8的正态分布的随机数。（数学）
六、使用D3绘制SVG
svg是可缩放矢量图语言，所以在svg上绘制的几何图形我们可以任意缩放，而不会导致像素模糊，当然也可以body上直接绘制空div，填充的方式，间接表现条形图，不过在通常来讲对前端人员来讲是不可能干的，所以我们一般在svg这个画布上绘制，先append一个div设置width，height，然后再添加rect，circle，svg上的几何图形有，rect，circle，还支持路径自由绘制。
1）创建svg
2）数据驱动的svg select，data，enter，append
3）绘制圆：圆心坐标，直径
这里会使用D3经典的select-data-enter-append-attr/style的编程套路。
也就是选择元素-绑定数据-添加新元素的占位符-添加元素-设置属性或样式。
七、SVG绘制更自由的条形图
1）创建svg
2）绘制矩形，绑定数据
3）矩形条的属性和样式
绘制的思路是：
- 条宽
条宽 = 条实际宽度 + 间隙的宽度。
其中条宽 = (w / dataset.length）
间隙的宽度 = barPadding
- 条高
条高 = 条长-纵坐标（纵坐标是从上到下计算，即下方向为正） 即条高 = h - (d * 4)
- 条的颜色
条的颜色用据数据集生成的动态RGB值填充。
4）文本标记（可是数值）
x坐标：i * (w / dataset.length) + (w / dataset.length - barPadding) / 2
y坐标：h - (d * 4) + 14;
八、散点图绘制
1）创建svg
2）绘制圆，绑定数据
3）圆的属性和样式
九、线性比例尺
1. 定义域和值域
比例尺有两个最重要的函数：
.domain([100, 500]) 定义域范围
.range([10, 350]) 值域范围
下面就是定义比例尺的方法：
var scale = d3.scale.linear()
.domain([100, 500])
.range([10, 350]);
比例尺最终都会对定义域执行相应的函数变换，然后再把这个中间数据线性变换到值域范围上。
2. 坐标轴的缩放
最大的X
d3.max(dataset, function(d) { //返回 480
return d[0]; //返回每个子数组的第一个元素
});
X轴缩放
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([0, w]);
3.设定圆心的坐标
缩放后的坐标X值
.attr("cx",function(d) {
return xScale(d[0]);
})
4.设定文本坐标值
.attr("x",function(d) {
return xScale(d[0]);
})
注：点大小与圈大小成正比，想把大的放在下面，只要改变Y轴值域倒转即可： .range([h , 0]);
注：为了SVG边缘不被截断可以设置边距： .range([h - padding, padding]);
十、坐标轴
1.定义和创建x轴
//定义X轴
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//创建X轴
svg.append("g").call(xAxis);
其中：
scale函数用来指定坐标轴的比例尺。
orient函数用来指定坐标轴的方位，可取值有left，right，top，bottom。
调用的时候任意的选择器call调用轴，或者xAxis(选择器)均可。
2. 调整X轴的样式
把坐标轴平移到下面：
svg.append("g")
.attr("class","axis")
.attr("transform","translate(0,"+ (h - padding) +")")
.call(xAxis);
3. 设置刻度数
.ticks(5); //设置刻度数
注意这个ticks函数指定的数字只是一个大概的数量，具体生成多少D3会自动调整。
4.Y轴
十一、动画
var tran = d3.transition() - 创建一个过渡对象
tran.delay() - 设置延时时间，过渡经过一段时间后才会开始
tran.duration() - 设定过渡的持续时间
tran.ease() - 设定过渡的样式。
tran.attr() - 设置过渡属性
tran.style() - 设置过渡样式;
网友评论