Day01（d3.js数据驱动文档）

D3是什么？它的作用是什么？

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

 

D3如何选择元素和绑定数据？

d3.select()：是选择所有指定元素的第一个

d3.selectAll()：是选择指定元素的全部

D3 中是通过以下两个函数来绑定数据的：

datum()：绑定一个数据到选择集上

data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定

相对而言，data() 比较常用。

 

一、下载方式

1、下载到本地，通过script引入

2、借助于CDN快速引入（只适合做Demo）

 

二、选择器

 

1、select只选择一个（默认为第一个）

 

2、selectAll（选择一组）

选择所有li

 

三、基本操作

1、选择设置样式  .style

 

2、设置属性   .attr

 

3、插入标签  .append

 

4、数据操作

 

 

 

 

 

 

（1）一条数据操作用datum

 

箭头函数

 

（2）一组数据  data

 

.text插入内容   

.text() 文本这个方法中有一个callback 形参两个 第一个是当条要替换数据的内容 第二个是索引

 

 

四、插入和删除

插入 append  insert（添加）

 

删除 remove

 

五、Svg

 SVG 是使用 XML 来描述二维图形和绘图程序的语言

什么是SVG？

    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

    SVG 用来定义用于网络的基于矢量的图形

    SVG 使用 XML 格式定义图形

    SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

    SVG 是万维网联盟的标准

    SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

 

 

svg 默认大小是300*150

svg 默认的color 是#000

svg 不能直接用style去更改其宽高 会导致变形

svg 画图的起始点 是0，0(左上角)

想画矩形步骤  

起始点 x 起始点 y 宽 w 高 h  默认背景颜色是 #000 如果你想更改 fill填充  如果 去掉填充 fill = 'none' 描边 stroke

画路径  起始点 MoveTo 在svg M  LineTo 在svg中 叫L

画出来的路径 默认是填充装填  把填充去掉