chapter-4 比例尺

如果用原生数值代替像素值，显示的图形过小或过大时，就需要将某一区域的值映射到另一区域，但其大小关系不变，这就是比例尺（Scale）了。

线性比例尺

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);

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

linear(0.9);    //返回 0  参数就是 dataset 中的item
linear(2.3);    //返回 175
linear(3.3);    //返回 300

其中，d3.scale.linear() 返回一个线性比例尺，返回值可以当做函数来使用的。domain() 和 range() 分别设定比例尺的定义域和值域。

注意：V4 版本改变了写法，应该是 var linear = d3.scaleLinear(); 。

上图用的是d3.v3 ，宽度比例尺和颜色比例尺

var data = [10,40,50,60];
var width = height = 500;
var widthScale = d3.scale.linear()
    .domain([0,60])
    .range([0,width]);

var colorScale = d3.scale.linear()
    .domain([0,60])
    .range(['red','blue']);

var canvas = d3.select('body')
    .append('svg')
    .attr('width',width)
    .attr('height',height);

var rect = canvas.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width',function(d){return widthScale(d)})
    .attr('height',50)
    .attr('fill',function(d){return colorScale(d)})
    .attr('y',function(d,i){
        return i*60;
    })

序数比例尺

如果，定义域和值域不一定是连续的，都是离散的。那就要用到序数比例尺了。

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

var ordinal = d3.scale.ordinal()        // 生成序数比例尺
    .domain(index)
    .range(color);

ordinal(0);     // 返回 red
ordinal(2);     // 返回 green
ordinal(4);     // 返回 black