d3-01

D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。

demo1:

使用d3来修改hello world

1
2
3
4
5
6
7

Hello World 1

8

Hello World 2

9
10
13
14

1 //选择中所有的

，其文本内容为 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
2
3
4
5
6
19
20
21
22
23
49
50
51
52

备注：svg矢量图

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

圆：circle cx:x轴坐标 cy：y轴坐标 r ：半径

矩形：rect 　　x：x轴坐标 y：y轴坐标

fill:填充属性

stroke：描边属性

stroke-width：描边宽度