Fork me on GitHub

D3学习记录

发表于 | 分类于 ， |
字数统计: 1.2k | 阅读时长 ≈ 4 min

学习笔记(๑•ั็ω•็ั๑) 基本上来自于参考网站，方便以后查阅。

选择元素

在 D3 中，用于选择元素的函数有两个：

  • d3.select()：是选择所有指定元素的第一个//如果选择多个可以加class名
  • d3.selectAll()：是选择指定元素的全部

这两个函数返回的结果称为选择集。例如，选择集的常见用法如下。

1
2
3
4
5
var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p");      //选择body中的第一个p元素
var p = body.selectAll("p");    //选择body中的所有p元素
var svg = body.select("svg");   //选择body中的svg元素
var rects = svg.selectAll("rect");  //选择svg中所有的svg元素

选择集和绑定数据通常是一起使用的。

绑定数据

D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。D3 中是通过以下两个函数来绑定数据的：

  • datum()：绑定一个数据到选择集上
  • data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

datum()

假设有一字符串 China，要将此字符串分别与三个段落元素绑定，代码如下：

1
2
3
4
5
6
7
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

绑定数据后，使用此数据来修改三个段落元素的内容，其结果如下：

1
2
3
第 0 个元素绑定的数据是 China
第 1 个元素绑定的数据是 China
第 2 个元素绑定的数据是 China

在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：

  • d 代表数据，也就是与某元素绑定的数据。
  • i 代表索引，代表数据的索引号，从 0 开始。

例如，上述例子中：第 0 个元素 apple 绑定的数据是 China。

data()

有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。

1
var dataset = ["I like dogs","I like cats","I like snakes"];

绑定之后，其对应关系的要求为：

  • Apple 与 I like dogs 绑定
  • Pear 与 I like cats 绑定
  • Banana 与 I like snakes 绑定

调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：

1
2
3
4
5
6
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
  .text(function(d, i){
      return d;
  });

这段代码也用到了一个无名函数 function(d, i)，其对应的情况如下：

  • 当 i == 0 时， d 为 I like dogs。
  • 当 i == 1 时， d 为 I like cats。
  • 当 i == 2 时， d 为 I like snakes。

此时，三个段落元素与数组 dataset 的三个字符串是一一对应的，因此，在函数 function(d, i) 直接 return d 即可。

结果自然是三个段落的文字分别变成了数组的三个字符串。

1
2
3
I like dogs
I like cats
I like snakes

插入元素

插入元素涉及的函数有两个：

  • append()：在选择集末尾插入元素
  • insert()：在选择集前面插入元素

假设有三个段落元素，与上文相同。

append()

1
2
3
4
5
6
body.append("p").text("append p element");
//在 body 的末尾添加一个 p 元素，结果为：
Apple
Pear
Banana
append p element

insert()

在 body 中 id 为 myid 的元素前添加一个段落元素。

1
2
3
4
5
6
body.insert("p","#myid").text("insert p element");
//已经指定了 Pear 段落的 id 为 myid，因此结果如下。
Apple
insert p element
Pear
Banana

删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

1
2
var p = body.select("#myid");
p.remove();

画布

SVG 是什么

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。SVG 有如下特点：

  • SVG 绘制的是矢量图，因此对图像进行放大不会失真。
  • 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
  • 每个图形均视为对象，更改对象的属性，图形也会改变。
  • 不适合游戏应用。

Canvas 是什么

Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
Canvas 有如下特点：

  • 绘制的是位图，图像放大后会失真。
  • 不支持事件处理器。
  • 能够以 .png 或 .jpg 格式保存图像
  • 适合游戏应用

添加画布

使用 D3 在 body 元素中添加 svg 的代码如下。

1
2
3
4
5
6
7
var width = 300;  //画布的宽度
var height = 300;   //画布的高度
 
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

参考

http://www.ourd3js.com/wordpress/

-------------完结撒花 -------------