D3.js 线性比例尺

线性比例尺最常用，与线性函数类似，计算线性的对应关系。

D3.scale.linear()

创建一个线性比例尺。

linear(x)

输入一个定义域内的值，返回值域对应的值。

linear.invert(y)

输入一个值域内的值，返回定义域对应的值。

linear.domain([numbers])

设定或获取定义域

linear.range([values])

设定或获取值域

linear.rangeRound([values])

代替range()使用的话，比例尺的输出值会进行四舍五入的运算，结果为整数。

linear.clamp([boolean])

默认被设置为false,当该比例尺接收一个超出定义域范围的值时，依然能够同样的计算方法计算得到一个值，这个值可能是超出值域范围的。如果设置为true，则任何超出值域范围的值，都会被收缩到值域范围内。

linear.nice([count])

将定义域的范围扩展成比较理想的形式。例如，定义域为[0.500000543,0.899995435234]，则使用nice()之后，其定义域变为[0.5,0.9]。对于[0.50000543,69.99997766]这样的定义域，则将自动将其变为[0,70]。

linear.ticks([count])

用于设置定义域内具有代表性的值的数目。count默认为10，如果定义域为[0,70]，
则函数返回[0,10,20,30,40,50,60,70]。如果count设置为3，则返回[0,20,40,60]。该方法主要用于选取坐标轴刻度。

linear.tickFormat(count,[format])

用于设置定义域内具有代表性的值的表示形式，如显示到小数点后两位，使用百分比的形式显示，主要用于坐标轴上。
以上方法中，linear(x)、invert()、domain()、range()是基础方法，使用形式如下:

let linear = d3.scale.linear()
            // 设置定义域为[0,20]
            .domain([0, 20])
            // 设置值域为[0,100]
            .range([0,100]);
console.log(linear(10)); // 输出50
console.log(linear(30)); // 输出150
console.log(linear.invert(80)); // 输出16

用linear()计算的结果是，输出都是输入的5倍；而使用linear.invert()时，输出都是输入值的五分之一。倒数第二行，linear接收了一个超出定义域范围的值30，结果还是正常输出其乘以5之后的值150。此输出值也超出了值域范围，如果不希望其超出范围，可使用clamp(),代码如下：

linear.clamp(true);
console.log(linear(30)); // 输出100

将clamp()设置为true后，超出值域范围的值会取值域的上下限作为输出。对于输出数值，如果希望对其进行四舍五入，要使用rangeRound()来设置；

linera.rangeRound([0,100]);
console.log(linear(13.33)); // 输出67

如果不用rangeRound()重新设置值域，则输出值为66.649999999999，其四舍五入值为67。如果定义域中有无穷小数，可用nice()，代码如下：

linear.domain([0.12300000,0.366666666]).nice();
console.log(linear.domain()); // 输出[0.1,0.4]

linear.domain([33.6111111,45.97745]).nice();
console.log(linear.domian()); // 输出[33,46]

应用nice()后，定义域变成了比较工整的形式，但是并不是四舍五入。最后讲解ticks()和tickFormat()的用法，它们主要用在坐标轴上的。请看下面的代码：

let linear = d3.scale.linear()
            .domain([-20,20])
            .range([0,100]);

let ticks = linear.ticks(5);
console.log(ticks); // 输出[-20,-10,0,10,20]

let tickFormat = linear.tickFormat(5, '+');
for (let i = 0; i < ticks.length; i++) {
    // ticks数组中的每一个值，都使用tickFormat()函数
    ticks[i] = tickFormat[ticks[i]];
}
console.log(ticks); // 输出['-20','-10','+0','+10','+20']

上面这段代码中，比例尺的定义域为[-20,20]，调用ticks(5)之后返回一个数组，分别是该定义域内具有代表性的值。然后，调用tickFormat()，返回值是一个函数，因此调用时要使用函数的调用方法。最终结果是，ticks变成设定的格式。此处设定的格式为‘+’；表示如果是正数，则在前面添加一个加号，负数则添加一个减号。除此之外，常用的格式还有‘%’，‘$’等，遵循迷你语言格式规范。
比例尺的domain()和range()最少放入两个数，可以超过两个数，但两者的数量必须相等。以下代码是放入三个数的情况；

let scale = d3.scale.linear();
scale.domain([0,20,40])
     .range([0,100,150]);
let result = scale(30); // 返回值为125

这表示有两个线性函数，当输入的值为30时，属于domain的20~40范围，那么输出为100~150范围。这里的30对应的值为125，所以result的值为125。

猜你喜欢