D3学习笔记之常用比例尺

在学习了D3之后，本人对d3的比例尺这部分有一定的兴趣，决定将这一部分写下来，供网友参考或者自己后面的使用。由于这是本人第一次写博客，对格式啥的不是特别的了解，希望大家多多见谅。

比例尺的概念

大家都知道，世界地图啥的都是采用的比例尺的方法，根据实际的大小，然后通过一定的比例，将其画下来，这就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。

定义域与值域

在数学中，x 的范围被称为定义域，y 的范围被称为值域。D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者只需要指定 domain() 和 range() 的范围，如此即可得到一个计算关系。

常用的比例尺

1.d3.scaleLinear()

使用d3.scaleLinear()创造一个线性比例尺，而domain()是定义域，range()是值域，相当于将domain中的数据集映射到range的数据集中。其中domain()中使用一个数组 ,range()中使用一个数组。

var dataset = [1, 2, 3, 4, 5];
var min = d3.min(dataset);
var max = d3.max(dataset);

var linear = d3.scaleLinear()  // 生成线性比例尺
    .domain([min, max])         // 设置定义域
    .range([0, 100]);           // 设置值域

	console.log(linear(1))  // 0
	console.log(linear(2))  // 25
	console.log(linear(5))  // 100
	console.log(linear(-1)) // -50
	console.log(linear(6))  // 125

从上面的代码可以看出，定义域使用的是一个数组，值域对应的也是一个数组。并且是平均的分为了五个点。并且，当输入不属定义域的内容时，系统也会根据相对应的比例关系来推算出相应的值。细心的人会发现，我在这里使用了另外的两个函数，d3.min()和d3.max().这两个函数是由d3提供的，分别用来求最大值和最小值。

2.d3.scaleBand()

使用d3.scaleBand()创造一个序数比例尺。其中domain()使用一个数组，range()中需要一个连续域。

let scale = d3.scaleBand().domain([1,2,3,4]).range([0,100])  // 100分为4份

		console.log(scale(1))  // 0
		console.log(scale(2))  // 25
		console.log(scale(3))  // 50
		console.log(scale(4))  // 100
		console.log(scale(5))  // undefined
		console.log(scale(0))  // undefined

从代码中可以看出，相当于把区间[0,100]分为4份，当输入不在定义域的数值时，输出的是undefined。

3.d3.scaleOrdinal()

这是另外的一种序数比例尺。其中定义域和值域输入的都是离散的数据。

let scale = d3.scaleOrdinal().domain(['tom','jack']).range([1,2,3,4])
        console.log(scale('tom'))      // 1
        console.log(scale('jack'))     // 2
        console.log(scale('lili'))     // 3  当输入不存在的值时，倘若定义域的值的数量小于值域，则会接着定义域的最后一个的输出结果
        // 进行输出，直至结束，然后从新再来一遍
        console.log(scale('java'))     // 4  
        console.log(scale('html'))     // 1
        console.log(scale('vs-Code'))  // 2

let scale = d3.scaleOrdinal().domain(['tom','jack','lili','ez']).range([1,2,3])
        console.log(scale('tom'))      // 1
        console.log(scale('jack'))     // 2
        console.log(scale('lili'))     // 3  当输入不存在的值时，倘若定义域的值的数量大于值域，则会接着定义域的第一个的输出结果
        // 进行输出，直至结束，然后从新再来一遍
        console.log(scale('ez'))       // 1  这里的ez，属于存在于定义域内，但没有应该对应的值，所以会从头对应一下
        console.log(scale('html'))     // 2  这是不在定义域内的值，会接着ez走，所以输出的是2
        console.log(scale('vs-Code'))  // 3

从代码中可以看出，d3.scaleOrdinal()这个比例尺，二者是一一对应的关系。具体的分析可以看注释。

4.d3.scaleQuantize()

这个是量化比例尺。定义域是连续的，值域是离散的

let scale = d3.scaleQuantize().domain([0,10]).range(['tom','jack','jeery'])  // range()里面的内容将前面的分为三份
        console.log(scale(0))  //tom
        console.log(scale(1))  //tom
        console.log(scale(2))  //tom
        console.log(scale(3))  //tom
        console.log(scale(4))  //jack
        console.log(scale(11)) //jeery
        console.log(scale(-1)) //tom

从代码中可以看出，可以类似的比作，值域把定义域给划分了。当输入小于定义域的最小值时，输出的是tom，当输入大于定义域的最大值是，输出的是jeery，也就是说，这可以看作是中间是闭合的，两边是开着的区间。

总结

以上就是常用的几种比例尺，希望可以帮到大家。