🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
比例尺是一个映射函数,把一个值域映射成一个可视的区域。也就是给一个输入,返回一个输出。这样上一章中的柱形图永远都不会超出可视区域。 ## d3.min() ``` var dataset = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]; d3.min(dataset) //返回数组中最小值 ``` ## d3.max() ``` var dataset = [[1, 1], [2, 3], [5, 8], [13, 21], [34, 55]]; d3.max(dataset, funtion(d) { return d[1]; //返回数组中的第2个值 }); ``` ## d3.extent() 返回一个数组,包含最小值和最大值。 ``` var data = [0.243, 0.584, 0.987, 0.153, 0.433]; var extent = d3.extent(data); //返回 [0.153, 0.987] ``` ## 线性比例尺 使用`d3.scaleLinear()`创造一个线性比例尺,而`domain()`是输入域,`range()`是输出域,相当于将`domain`中的数据集映射到`range`的数据集中。 ~~~ let scale = d3.scaleLinear().domain([1,5]).range([0,100]) ~~~ ## 再绘柱形图(带自动比例缩放功能) ``` var dataset = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]; var w = 500; var h = 200; var padding = 3; //两个柱形之间的缝隙 var w_bar = (w - padding * dataset.length) / dataset.length; // 柱形的宽度需要去掉缝隙 var yScale = d3.scaleLinear() //建立一个线性比例尺 .domain([0, d3.max(dataset)]) //值域的范围 .range([0, h]); //映射到可视的区域 d3.select('body').append('svg') .attr('width', w).attr('height', h) .selectAll('rect').data(dataset).enter().append('rect') .attr('x', (d, i) => i * (w_bar + padding)) .attr('y', d => h - yScale(d)) //注意坐标0点在左上角 .attr('width', w_bar) .attr('height', d => yScale(d)) //高度是映射后的值 .attr('fill', 'teal') ``` ![](https://img.kancloud.cn/a2/3b/a23b121b50f3dfe633af5853193fe75b_506x211.png) 后面还会遇到其他类型的比例尺,最常见的就是时间比例尺。