D3

简介

D3是一个数据驱动的数据可视化js函数库，类似jQuery，D3可以借助svg，html，canvas将数据生动的展现出来。

选择元素与绑定数据

选择元素

D3中选择元素的函数有两个：
d3.select() 选择所有指定元素的第一个
d3.selectAll() 选择所有指定元素

  const svg = d3.select('svg');
  const divArr=d3.selectAll('div');

绑定数据

D3可以将数据绑定到DOM元素上，绑定函数如下：
datum() 绑定一个数据到选择集上
data() 绑定一个数组到选择集上，数组的元素与选择集的元素一一对应
比如将一个数据绑定到指定DOM元素上

  const str = '使用datum绑定数据！'
  const p = d3.select('p')
  p.datum(str).text(function(d,i) {
      return d;
  })

  const dataset = [1,2,3]
  const span = d3.selectAll('span')
  p.data(dataset).text((d, i) {
    return d;
  })

匿名函数

D3中使用数据时基本都会用到匿名函数，函数中有两个参数，第一个参数代表当前与元素绑定的数据，第二个参数代表数据的索引，和数组一样从0开始。
这个函数可以使普通函数也可以是箭头函数，如果函数中需要用到this的时候需要使用普通函数，比如通过this来获取当前元素的d3节点 d3.select(this)

操作元素

选择元素

可以通过select和selectAll选择元素，选择元素时和document的操作差不多，可以通过id，class，标签名，属性名来任意选择元素

插入元素

append() 在选择集尾部插入元素
insert() 在选择集前面插入元素

删除元素

针对选中的元素 remove()即可

元素与数据数量对齐

在数据与DOM绑定的过程中，可能会出现数据的元素数量与DOM节点数量不符。例如一个长度为3的数据绑定在一个长度为4的选择集上，这种情况可以通过以下函数来处理
enter() 数据数量 > 节点数量
exit() 数据数量 < 节点数量
update 数据数量 = 节点数量

比例尺

比例尺是一种映射关系，从domain映射到range域

线性比例尺

domain域和range域都可以连续变化
线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图长度的问题，就需要线性比例尺。

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3]; var min = d3.min(dataset);//得到最小值 
var max = d3.max(dataset);//得到最大值
var scaleLinear = d3.scaleLinear().domain([min,max]).range([0,300]);
document.write("scaleLinear(1)输出："+scaleLinear(1)); //输出：12.499999999
document.write("scaleLinear(2)输出："+scaleLinear(2)); //输出：137.5
document.write("scaleLinear(3.3)输出："+scaleLinear(3.3)); //输出：300

比例尺的定义域 domain 为：[0.9, 3.3]
比例尺的值域 range 为：[0, 300]
因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。当输入 2.3 时呢？返回 175，这是按照线性函数的规则计算的。
注意：
d3.scaleLinear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：scaleLinear(1)。

序数比例尺

有时候，定义域和值域不一定是连续的。domain域和range域是离散的，也就是数组。

var index = [0,1,2,3,4];
var color = ["red","blue","yellow","black","green"];
var scaleOrdinal = d3.scaleOrdinal().domain(index).range(color); 
document.write("scaleOrdinal(1)输出："+scaleOrdinal(1));输出：blue
document.write("scaleOrdinal(2)输出："+scaleOrdinal(2));输出：yellow
document.write("scaleOrdinal(4)输出："+scaleOrdinal(4));输出：green

图表步骤

1.访问数据
查看数据结构并声明如何访问我们的值
2.创建图表尺寸
声明物理（即像素）图表参数
3.绘制画布
渲染图表区域和绑定元素
4.创建尺度
为我们的图表中的每个数据到物理属性创建尺度
5.绘制数据
渲染我们的数据元素
6.绘制外围设备
渲染轴，标签等
7.建立互动
初始化事件侦听器并创建交互行为

需要注意的点

版本差异

V5版本对绘图的API有变动，比如V3d3.layout.pie()，V5版本d3.pie()就可以了。

属性设置

attr("class","selected")和classed("selected", true)是有区别的。前者会直接覆盖之前的class属性，而后者仅仅是针对selected这个类名的设置。