企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 比例尺 接着上面来学习比例尺的使用。 知道了比例尺的作用就是计算映射。 那么我们简单的尝试几个例子。 1. 已知图表的高度是260,我们两下各留白30,这样我们展示数据的区域为200,现在我们数据范围是0-1000,求[100,150,285,360,980]的位置?如果此时修改数据为[1000,350,1285,760,680],并且需要重置数据范围,且图表展示区域不变呢?(ps:只计算0-200之间,不考虑留白的30) 第一问: ``` javascript //分析这个数据需要使用线性比例尺 var y = d3.scaleLinear() .domain([0,1000]) //已知输入域为0-1000 .range([0,200]) //值域为0-200 var array = [100,150,285,360,980] array.forEach(function(d){ console.log(y(d)) d3.select("#root").append('div').html(y(d)) }) ``` 具体完整实例查看[scale0](https://doter1995.github.io/d3-start-course/scale/scale-0.html) 第二问: ``` javascript var y = d3.scaleLinear() .domain([0,1000]) //已知输入域为0-1000 .range([0,200]) //值域为0-200 var array = [100,150,285,360,980] array = [1000,350,1285,760,680] //计算新的输入域d3.extent(array)将会返回array的最小值和最大值 y.domain([0,d3.max(array)]) array.forEach(function(d){ console.log(y(d)) d3.select("#root").append('div').html(y(d)) }) ```