关于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有四种动态方式

transition()//状态过渡

duration() //时间过渡 毫秒

ease() //指定具体过渡方式

linear：普通的线性变化

circle：慢慢地到达变换的最终状态

elastic：带有弹跳的到达最终状态

bounce：在最终状态处弹跳几次

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）//不能直接使用

以上布局并不能实现具体界面 它们只是将原始数据进行相关解析

待续。。。