咸鱼的D3-1.选择元素 d3.selectAll() d3.select()

1,113

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的核心。

如何进行数据绑定?

请看下一章 绑定数据。