D3.js学习-选择元素和绑定数据

学习笔记，方便使用。 d3.select() - 选择所有指定元素的第一个 d3.selectAll() - 选择指定元素的全部

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元素

datum()：绑定一个数据到选择集上 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; });

结果： 第 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; });

结果：

I like dogs I like cats I like snakes