D3.js学习笔记

选择器

• select()和selectAll()是D3.js的主要选择器API
• 选择器支持css3选择器语法

数据绑定

• data(array)绑定数组
• datum(string)绑定字符串
• 所有需要动态生成的都是通过用function(d or d,i){}来实现。就会动态的遍历数组，d和this指的是相应的对象，i指的是对象的下标

比例尺

• d3.scale.linear()返回一个计算后的比例尺值

    var dataset = [1.2,3.2,3.1,1.7,.2.5];
    var linear = d3.scale.linear().domain([0,max(dataset)]).range([0,300]);
  

  通过linear(num)可以调用比例尺，可以转换成对应的大小

• 比例尺主要是通过定义域和值域的映射关系实现的，domain定义的是定义域，range定义的值域

坐标轴

数据

• d3中默认函数参数d与当前图形元素关联,并且d是js对象，可以通过对象字面量获取相应的信息。

• 函数参数i与当前图形元素下标关联。

• each函数还有个默认的this。

• 进入-更新-退出模式(enter-update-exit)——将数据和图形建立联系

  

  这是selection.data(data)函数选择的交集，也update的状态

  

  这是selection.data(data).enter()函数选择的集合，选中的是未被可视化的数据

  

  这是selection.data(data).exit()函数选择的集合，选中的是图形和数据脱离联系的集合，比如说已经不需要的图形需要删除