一、进入-更新-退出模式
更新（updata）：selection.data(data)
返回一个碧昂定了数据的D3对象集合。
进入（enter）：selection.data(data).enter()
获得数据集合中未被可视化的数据集合。
退出（exit）：
获取没有关联数据的D3对象集合。
注：
data()函数可以接受函数作为参数，data()函数会直接调用该函数，并将其返回值作为参数使用。
如下列代码所示，存在data数组中的都是next函数。
var data = [];
var next = function(x) {
return 15 + x * x;
}
var newData = function() {
data.push(next);
return data;
}
function render() {
var selection =
d3.select('#container')
.selectAll('div')
.data(newData);
selection
.enter()
.append('div')
.attr('class', 'v-bar')
.append('span');
selection
.style('height', function(d, i) {
return d(i) + 'px';
})
.select('span')
.text(function(d, i) {
return d(i);
});
selection.exit().remove();
setTimeout(function() {
render();
}, 1500)
}
render()
二、scale:尺度
若A代表数据域，B代表图形域，那么函数f就是D3中将集合A映射到集合B的一个尺度。f(a) = b
尺度函数通常是单射函数，而不是满射函数。单射函数、满射函数、双射函数的区别如下：
1）单射函数：将不同的变量映射到不同的值的函数；
2）满射函数：陪域（f: A -> B, 集合B为陪域）等于值域的函数，即陪域中的任何一个元素都存在至少一个定义域中的元素与之对应；
3）双射函数：单射函数+满射函数，即值域与定义域中的元素一一对应的函数。
D3中常用的尺度是数值尺度，包括线性尺度（scaleLinear()）、幂级尺度（scalePow()）、对数尺度（scaleLog()）、时间尺度（scaleTime()）、身份尺度（scaleIdentity()）。
// 尺度创建两种方式(v5)
var x = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);
var x = d3.scaleLinear([10, 130], [0, 960]);
常见API
continuous.invert(value) :根据传入的值域的值，返回对应的定义域的值。
continuous.domain([domain]) ：可以接受定义域值特定且可数的情况，将定义域的值转换为数组形式输入。
此时要求定义域的值必须是数字，值域必须是升序或者降序排列，查找时通过二分查找确定对应的值。
continuous.clamp(clamp) ：如果将clamp设置为true,则针对值域和定义域的查找定位都只能在给定的范围内。
continuous.range([range]) :设定值域
continuous.rangeRound([range]) ：对超出值域的值进行四舍五入处理。
continuous.unknown([value]) ：设置undefined输出
continuous.interpolate(interpolate)：
三、插值器interpolate
包括：数值插值器interpolateNumber、字符插值器interpolateString、颜色插值器interpolateRgb、日期插值器interpolateDate、数组插值器interpolateArray、对象插值器interpolateObject。
四、坐标轴 axis
在SVG坐标系中，(0,0)是SVG画布的左上角。
坐标中的g.tick元素通过坐标轴的translate属性，转换为自己特定的坐标。
设置axis步骤
// 1.设置axis对应的scale
const axisScaleX = d3.scaleTime()
.domain([startTime, endTime])
.range([0, CANVAS_WIDTH - 2 * CANVAS_MARGIN])
// 2.创建Axis组件
// 包含Scale尺度容器、设置坐标轴朝向、设置刻度（ticks）
const axisX = d3.axisTop(axisScaleX)
.tacks(d3.timeMinute.every(1));
// 3.创建SVG元素，使用g元素包含相关元素
// D3中的Axis组件仅支持SVG画布
//使用transform属性来计算在svg画布上绘制的坐标轴的位置
this.svg = d3.select('canvas')
.append('svg')
.attr('width', CANVAS_WIDTH)
.attr('height', CANVAS_HEIGHT)
.classed('svg', true)
this.svg.append('g')
.attr('transform', function() {
return `translate(${CANVAS_MARGIN}, ${CANVAS_HEIGHT - CANVAS_MARGIN})`;
})
.call(axisX)
