D3.js基础语法，精通D3.js，D3.js小书，第一篇

       从今天起我给大家分享一下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，一起学习进步