D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。
使用：直接引用即可使用。
demo1:
使用d3来修改hello world
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>HelloWorld</title> 5 </head> 6 <body> 7 <p>Hello World 1</p> 8 <p>Hello World 2</p> 9 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 10 <script> 11 d3.select("body").selectAll("p").text("www.decembercafe.org"); 12 </script> 13 </body> 14 </html>
1 //选择<body>中所有的<p>，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中 2 var p = d3.select("body") 3 .selectAll("p") 4 .text("www.ourd3js.com"); 5 6 //修改段落的颜色和字体大小 7 p.style("color","red") 8 .style("font-size","72px");
选择集
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。
区别：select()只返回第一元素对象
selectAll()返回所有元素的对象
demo2：
圆形和矩形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>first</title> 6 <style> 7 .mycircle{ 8 fill:blue; 9 stroke:green; 10 stroke-width:3px; 11 } 12 .myrect{ 13 fill: red; 14 stroke:green; 15 stroke-width: 6px; 16 } 17 18 </style> 19 20 </head> 21 <body> 22 <script src="d3.js"></script> 23 <script> 24 //动态插入html 25 var body = d3.select('body'); 26 body.append('h1') 27 .text('hello world'); 28 29 body.append('p') 30 .text('d3 d3'); 31 //创建svg 32 var svg = body.append('svg') 33 .attr('width',400) 34 .attr('height',400); 35 svg.append('circle') 36 .attr('cx',100) 37 .attr('cy',200) 38 .attr('r',80) 39 .attr('class','mycircle'); 40 41 svg.append('rect') 42 .attr('x',200) 43 .attr('y',0) 44 .attr('width',150) 45 .attr('height',200) 46 .attr('class','myrect'); 47 48 </script> 49 50 51 </body> 52 </html>
备注：svg矢量图
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
圆：circle cx:x轴坐标 cy：y轴坐标 r ：半径
矩形：rect x：x轴坐标 y：y轴坐标
fill:填充属性
stroke：描边属性
stroke-width：描边宽度