【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)
本人的个人博客为: www.ourd3js.com
csdn博客为: blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
在上一节中使用了一个非常重要的概念 — scale (这个不知道翻译成什么,暂且叫它比例)。本节将重点介绍它的相关用法。
在介绍 scale 之前,先介绍两个常常和 scale 一起出现的函数,在上一节中也出现了。
- d3.max()
- d3.min()
var dataset = [ 30, 20 , 52 , 2 , 11 ];var result = d3.max( dataset );
变量 result 中保存的是数组 dataset 的最大值 52。这是一维数组的使用方法,二维数组的使用方法例如以下:
var dataset = [ [ 30 , 20 ] , [ 52 , 2 ] ,[ 90 , 11 ] ];
var result = d3.max( dataset , function(d){ return d[0]; } );
如此,返回的值为90, 由于比較的是30,52,90这三个数,最后一行的 d[0] 就是指定每个数组的第一个值。
var scale = d3.scale.linear();scale.domain([0,20]).range([0,100]); var result = scale(10);
通过 d3.scale.linear() 指定要使用线性函数的 scale 。下两行指定 scale 的 domain 和 range ,这里分别为 [ 0 , 20 ] 和 [ 0 , 100 ],假设不指定,它们默认都为 [ 0 , 1 ] 。接下来调用 scale 函数,传了一个參数10给它,返回值保存在 result 中。 result 的值为多少呢, 是 50 。它是依据线性函数计算的。一定要记住, scale 是一个函数。
var scale = d3.scale.linear();scale.domain([0,20,40]).range([0,100,150]); var result = scale(30);
这就是说有两个线性函数,当输入的值为30时,属于 domain (定义域)的20-40这个范围,那么输出为100-150这个范围。这里的30相应的值为125,所以 result 的值为125。
d3.scale.linear() 中另一些方法,这里介绍两个:
- nice() ,改变函数的 domain ,能自己主动把 0.00000000000001 变为最接近它的 0 , 9.999999991 变为最接近它的 10
- rangeRound() , 能自己主动把输出变为最接近它的整数。
scale.domain([0.000000001,9.99999999991]).range([0,100]).nice();
转载于:https://www.cnblogs.com/zfyouxi/p/4298549.html
【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)相关推荐
- 【 D3.js 入门系列 --- 10 】 地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中重复出现了例如以下代码: svg.selectAll ...
- 【 D3.js 入门系列 --- 10.2 】 你可以拖动地图
我的个人博客是:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 本节是结合9.2节 和10节 的内容制作的一个可力学导向的中国地图,用 ...
- 【 D3.js 入门系列 --- 9 】 常见可视化图形
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 ...
- 数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
最新文章
- UE商城资源 Kitsune狐狸女孩
- AI和大数据如何落地智能城市?京东城市这6篇论文必读 | KDD 2019
- 【转】Apache配置中ProxyPassReverse指令的含义
- CSS3无前缀脚本prefixfree.js与Animatable使用
- python测试之道第5章模拟网络请求
- 11. jsp与servlet之间页面跳转及参数传递实例
- Windows phone 8 学习笔记(5) 图块与通知
- 深度复盘 | 滴滴专车会员项目如何做好设计优化
- zcmu-1931(dfs方格切割)
- vue项目中的遇错:Invalid Host header
- linux下检测硬盘,【转载】linux下硬盘监控诊断工具SmartTools
- C++中的也能使用正则表达式
- mysql 修改编码不成功解决办法
- @datetimeformat注解使用 晚了8个小时_Java注解,就是那么简单
- 中国AI公司公开击败谷歌微软,这次是Yi+AI视觉团队
- 【中南林业大学第十一届校赛E:】砝码和天平(转化为进制问题+模拟进位)
- 微信扫码免密登陆第三方应用平台
- 韩信点兵php,韩信点兵c语言
- Java初学笔记30-【MiniQQ聊天部分代码】
- 看完后就知道如何提高网站的打开速度,受益非浅!