从今天起我给大家分享一下D3.js ,D3是一个JavaScript的函数库,D3 的全称是 Data-Driven Documents,我这边不做多介绍,本次分享只想着给大家分享一点干货。
有些同学应该听过Echarts、Highcharts、Chart.js等等,要知道这些都是基于D3封装的,熟悉D3的人能做出一个属于自己的Highcharts或者Echarts,但是熟悉Highcharts的人却写不出Echarts,更写不出D3,好了 不多说直接撸代码。
第一篇
1. 查找节点
select、selectAll
//#d3 可以向jQuery一样链式调用,可以一直链下去
d3.select('#odiv');
d3.select('body').select('div');
d3.select('body div p');//select只会选中第一个节点
d3.selectAll('body div p');//这样就能全部选中了
d3.selectAll('body div .opo');
2. D3提供了6中设置属性的方法:
attr、classed、style、property、text、html
let p = d3.select('body').selectAll('p');
p.attr('name','p');//attr:属性添加
p.classed('1',true).classed('2',false);//classed 会根据第二个值判断是否为true,如果为true则添加这个class,如果不为true则不会添加
p.style('height','10px').style('background','tomato');//css样式
d3.select('#inp').property("value");//这样就能获取到input框里的内容了
d3.select('#inp').property("value",'hello world');//这样可以修改input框里的内容
p.text('opo');//文本
p.html('<div>123</div>');//和js中的innerHTML一样
3.添加、插入、删除节点
let body = d3.select('body');
body.append('p');//末尾处添加一个p标签
body.insert('p','#p');//在#p前面插入
d3.select('#p').remove();//删除#p
4.数据绑定:datum()、data()
// 这两个方法都是会添加一个__data__这个属性
let arr = [1,2,3];
let p = d3.selectAll('body p');
p.datum(arr); // __data__:[1,2,3]
p.data(arr); // 第一个p标签的__data__属性为:1,第二个p标签的__data__属性为:2,第三个p标签的__data__属性为:3
本文讲了查找节点方式、设置属性的方法、节点操作、数据绑定 ,怎么样学会了吗?
有想一起学习D3的朋友可以加QQ群881658075,一起学习进步