用HTML4坐标d,小可爱的d3学习笔记

一、简介

1. D3是什么？

D3 (或D3.js) 是一个用来使用Web标准做数据可视化的JavaScript库。 D3帮助我们使用SVG, Canvas 和 HTML技术让数据生动有趣。 D3将强大的可视化，动态交互和数据驱动的DOM操作方法完美结合，让我们可以充分发挥现代浏览器的功能，自由的设计正确的可视化界面。

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() - 设置过渡样式;