d3是对dom进行操作的,所以第一步我们需要选中dom,这时就需要d3.selectAll() 和 d3.select()。
常规用法
d3.selectAll(classname || ele)、d3.select(id)会返回选中的元素,d3.selectAll会返回一个元素的集合,d3.select会返回匹配的第一个对象。这俩个方法返回的都是经过d3封装的对象,有的同学要问了那么我想用原生dom的方法怎么办?我们只需调用 selection.node()就可以转换原生的dom,就可以调用原生方法了。d3是支持链式回调的写法的,发布一个简单的示例写法
d3.select('body')
.selectAll('div')
.style('width', '100px')
上面这段代码的意思就是选中body下所有的div元素设置其宽度为100。
更多示例:
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元素
var nodes = d3.selectAll('.node') //选择所有class为node的元素
var myid = d3.select('#myid') //选择id为myid的元素
选择dom用来做什么?
d3选择dom主要时对dom进行数据绑定这也是d3的核心。
如何进行数据绑定?
请看下一章 绑定数据。