D3学习笔记

一、进入-更新-退出模式
更新（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)