当前位置: 首页 > Web前端 > HTML

交互式数据可视化-D3.js(三)Scale

时间:2023-04-02 19:27:22 HTML

LinearScaleLinearScale是一种常用的scale常用方法有:varlinear=d3.scaleLinear()-创建一个定量的线性scale.linear.domain([numbers])-定义或获取范围linear.range([values])-定义或获取范围linear(x)-输入范围内的值,返回范围内的值linear.invert(y)-输入范围值,返回值的范围linear.rangeRound([values])-代替range(),scale的输出值将被四舍五入并返回一个整数linear.clamp([boolean])-默认flase,当scale接受avalueoutsidethedefinition时,域范围的值仍然可以按照同样的计算方法得到一个值,这个值超出了值域的范围。如果设置为true,范围外的所有值都会收缩到范围内。linear.nice([count])-将定义域的值扩展到一个更理想的值而不进行四舍五入linear.ticks([count])-设置或获取坐标轴刻度的近似使用形式:varlinear=d3.scaleLinear().domain([0,90]).rangeRound([0,100]).clamp(true);console.log(linear(95));//100console.log(linear.nice().ticks(9));//[0,10,20,30,40,50,60,70,80,90]console.log(linear.range());//[0,100]exponential,quantum,thresholdscalescale中的很多方法都是一样的,比如domain(),range(),invert()等,名字和功能都一样,有些区别是下面指出。与线性标尺相比,指数标尺多了一个exponent()来指定指数。使用方法如下:varpow=d3.scalePow().exponent(3).domain([0,3]).rangeRound([0,90]);控制台日志(战俘(2));//27exponentis3andinputis2.这段代码相当于定义了一个线性刻度。定义域为[0,27],取值范围为[0,90]。当计算2的3次方时,结果为8。对这个结果进行线性缩放后,最终达到27。验证请看下面的代码:varpow=d3.scalePow().exponent(3)。域([0,3]).rangeRound([0,90]);varlinear=d3.scaleLinear().domain([0,Math.pow(3,3)]).rangeRound([0,90]);console.log(pow(2));//27console.log(线性(Math.pow(2,3)));//27量子尺度量子尺度的域是连续的。取值范围是离散的,结果就是对应的离散值。varquantize=d3.scaleQuantize().domain([0,10]).range(['a','b','c','d','e']);console.log(量化(1))//aconsole.log(quantize(4.1))//c使用量子尺度后,域会被划分为[0,2],[2,4],[4,6],[6,8],[8,10]这5段对应取值范围的5个值。量子标度非常适合处理“值对应颜色”的问题。阈值标度类似于量子标度。阈值尺度将连续域映射到离散值域。var阈值=d3。规模阈值()。域([0、2、4、6、8])。范围(['a','b','c','d','e']);console.log(threshold(3))//cconsole.log(threshold.invertExtent('b'))//[0,2]Quantum和threshold很相似,都是将连续域映射到离散值域。序数尺度序数尺度的定义域和取值范围都是离散的。通过输入一些离散值(如姓名、序列号、身份证号等),得到其他离散值(如颜色、标题等),这考虑了序数尺度。常用方法有:varordinal=d3。scaleOrdinal()-创建一个序数标度。ordinal(x)-根据输入值计算相应的输出值。ordinal.domain([values])-设置输入范围。ordinal.range([values])-设置输出范围。ordinal.unknown([values])-设置未知输入的输出值。粗略的用法形式:varordinal=d3.scaleOrdinal().domain(['a','b','c','d','e']).range([0,2,4,6,8]).unknown('outofinputrange');console.log(ordinal('a'))//0console.log(ordinal('g'))//超出输入范围。轴轴组件可以将比例显示为人性化的比例参考,减轻可视化中的视觉任务。坐标轴相关的常用方法如下。d3.axisLeft(linear)-使用给定比例构建左比例轴生成器d3.axisBottom(linear)-使用给定比例构建底部比例轴生成器d3.axisRight(linear)-构建轴生成器使用给定比例d3.axisTop(linear)-使用给定比例构造一个顶部带有刻度的轴生成器axis.ticks([argument...])-Set指定或获取坐标轴。axis.tickValues([argument...])-指定values数组,使用指定的数组作为刻度,而不是自动计算刻度axis.tickPadding([padding])-设置刻度与刻度之间的间距文本:varlinear=d3.scaleLinear().domain([1000,0]).rangeRound([0,250])varaxisLeft=d3.axisLeft(linear).ticks(4);varsvg=d3.select('#axis').append('svg').attr('width','400').attr('height','300');vargLeft=svg.append("g").attr("转换“,”翻译(40,20)“)。呼叫(左轴);