D3.js学习笔记(1)--基本概念

如何选择元素

d3.select()：是选择所有指定元素的第一个
d3.selectAll()：是选择指定元素的全部

以上两个方法的返回结果称为选择集

---

如何绑定数据

datum()：绑定一个数据到选择集上 类似于jq的data() 方法
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

datum示例

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str);

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});
//此处的function为匿名函数 function(d,i)
d 代表数据，也就是与某元素绑定的数据
i 代表索引，代表数据的索引号，从 0 开始

//输出结果
第 0 个元素绑定的数据是 China 
第 1 个元素绑定的数据是 China 
第 2 个元素绑定的数据是 China 

data示例

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

var body = d3.select("body");
var p = body.selectAll("p");

p.data(dataset)
  .text(function(d, i){
      return d;
  });

---

选择、插入、删除元素

选择用的是最开始介绍的两个方法

插入元素：

append()：在选择集末尾插入元素
eg:
body.append("p")
    .text("append p element");
insert()：在选择集前面插入元素
eg:
body.insert("p","#myid")
  .text("insert p element");

删除元素：

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