关于D3.js学习记录

关于d3学习记录。

学习OUR D3.JS数据可视化专题站记录的笔记。在此感谢作者！

d3的预定义元素

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线段 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

分组 <g>

选择中所有的

，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中

var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com");
关于选择标签是也可用# . 来通过id和class选择。

修改段落的颜色和字体大小
p.style(“color”,”red”)
.style(“font-size”,”72px”);

数据绑定

datum();//用于单个数据绑定到控件（可以是多个控件）
data(); //多个数据(数组等)绑定到控件

标签插入

append() //集合末尾插入
insert() //某个标签前插入
例如：
//源html

Apple

Pear

Banana

//末尾插入
body.append(“p”)
.text(“append p element”);
//结果
Apple
Pear
Banana
append p element
//前插入
body.insert(“p”,”#myid”)
.text(“insert p element”);
//结果
Apple
insert p element
Pear
Banana

//标签删除
var p = body.select(“#myid”);
p.remove();

关于d3画图。

首先svg和canvas的区别：
svg适合构建矢量图，
canvas适合游戏。

由于d3多数支持svg 所以建议使用svg绘图。（有待考证）
构建svg画布：

var width = 300; //画布的宽度
var height = 300; //画布的高度

var svg = d3.select(“body”) //选择文档中的body元素
.append(“svg”) //添加一个svg元素
.attr(“width”, width) //设定宽度
.attr(“height”, height); //设定高度

//SVG 中，矩形的元素标签是 rect 标签就应该是
<svg>
<rect></rect>
<rect></rect>
</svg>
//x y：表示矩形的左上角坐标 height width 共四个参数构建矩形

比例尺使用

D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。
d3.scale

1.线性比例尺的使用d3.scale.linear
var min=1;
var max=3;

var linear=d3.scale.linear()
.domain([min, max])
.range([0, 300]);
linear(1);//返回0
linear(2);//返回150
linear(3);//返回300
2.序数比例尺d3.scale.ordinal
var index = [0, 1, 2, 3, 4];
var color = [“red”, “blue”, “green”, “yellow”, “black”];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0);返回的是red 一次类推，即类似于合成键值对
3.圆柱形的比例尺是在线性比例尺上推展出来的
具体参照：原教程地址

坐标轴

d3.svg.axis()使用D3的组件
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient(“bottom”) //指定刻度的方向
.ticks(7); //指定刻度的数量
添加到svg中
svg.append(“g”).call(axis);
样式设定
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>

svg.append("g")
.attr("class","axis") //在这里直接设置样式
.attr("transform","translate(20,130)")
.call(axis);
完整实例 http://www.ourd3js.com/wordpress/121/

动态

D3有四种动态方式

1. transition()//状态过渡
2. duration() //时间过渡 毫秒
3. ease() //指定具体过渡方式
   
   • linear：普通的线性变化
   • circle：慢慢地到达变换的最终状态
   • elastic：带有弹跳的到达最终状态
   • bounce：在最终状态处弹跳几次
4. delay() //延迟过渡 毫秒

Update、Enter、Exit

问题描述：假设，在 body 中有三个 p 元素，有一数组 [3, 6, 9]，则可以将数组中的每一项分别与一个 p 元素绑定在一起。但是，有一个问题：当数组的长度与元素数量不一致（数组长度 > 元素数量 or 数组长度 < 元素数量）时呢？这时候就需要理解 Update、Enter、Exit 的概念。

如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。

简单描述：
Update数据与元素完全结合
Enter是补充的元素与数据结合
Exit 是没有数据的元素
update 部分的处理办法一般是：更新属性值
enter 部分的处理办法一般是：添加元素后，赋予属性值
exit 处理一般是remove 删除操作。

交互

一般操作：

var circle = svg.append(“circle”);
circle.on(“click”, function(){
//在这里添加交互内容
});
事件
1. 鼠标
- click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
mouseover：光标放在某元素上。
mouseout：光标从某元素上移出来时。
mousemove：鼠标被移动的时候。
mousedown：鼠标按钮被按下。
mouseup：鼠标按钮被松开。
dblclick：鼠标双击。
2. 键盘
keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。 keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
keyup：当用户释放键时触发，不区分字母的大小写。
3. 触屏操作
touchstart：当触摸点被放在触摸屏上时。
touchmove：当触摸点在触摸屏上移动时。
touchend：当触摸点从触摸屏上拿开时。

布局(数据转换)

饼状图（Pie）、
力导向图（Force）、
弦图（Chord）、
树状图（Tree）、
集群图（Cluster）、
捆图（Bundle）、
打包图（Pack）、
直方图（Histogram）、
分区图（Partition）、
堆栈图（Stack）、
矩阵树图（Treemap）、
层级图（Hierarchy）//不能直接使用
以上布局并不能实现具体界面 它们只是将原始数据进行相关解析

待续。。。