D3.js的v5版本入门教程(第七章)—— 比例尺的使用
D3.js的v5版本入门教程(第七章)
比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺)
下面介绍在本套教程中常用的两种比例尺
线性比例尺
序数比例尺
线性比例尺
domain域和range域都可以连续变化
<body>
<script>
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);//得到最小值
var max = d3.max(dataset);//得到最大值
var scaleLinear = d3.scaleLinear()
.domain([min,max])
.range([0,300]);
document.write("scaleLinear(1)输出:"+scaleLinear(1));
d3.select("body").append("br");//换行
document.write("scaleLinear(2)输出:"+scaleLinear(2));
d3.select("body").append("br");
document.write("scaleLinear(3.3)输出:"+scaleLinear(3.3));
</script>
</body>
运行结果:
代码说明:
-var scaleLinear = d3.scaleLinear()
.domain([min,max])
.range([0,300]);也就是[0.9,3.3]映射[0,300]
-scaleLinear(3.3),由映射关系可以知道,这里的输出为300,实际上的输出也是这样
序数比例尺
domain域和range域是离散的,也就是数组
<body>
<script>
var index = [0,1,2,3,4];
var color = ["red","blue","yellow","black","green"];
var scaleOrdinal = d3.scaleOrdinal()
.domain(index)
.range(color);
document.write("scaleOrdinal(1)输出:"+scaleOrdinal(1));
d3.select("body").append("br");//换行
document.write("scaleOrdinal(2)输出:"+scaleOrdinal(2));
d3.select("body").append("br");
document.write("scaleOrdinal(4)输出:"+scaleOrdinal(4));
</script>
</body>
运行结果:
代码说明:
-var scaleOrdinal = d3.scaleOrdinal()
.domain(index)
.range(color);建立一个序数比例尺
使用比例尺来建立上一章的柱状图
<body>
<svg width="960" height="600"></svg>
<script>
var marge = {top:60,bottom:60,left:60,right:60}
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //定义一个线性比例尺
var scaleLinear = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([0,300]); var svg = d3.select("svg");
var g = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")"); var rectHeight = 30; g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return scaleLinear(d);//设置宽,并在这里使用比例尺
})
.attr("height",rectHeight-5)
.attr("fill","blue");
</script>
</body>
运行结果:
代码说明:
-.attr("width",function(d){
return scaleLinear(d);//设置宽,并在这里使用比例尺
})可以发现,我们在这里使用比例尺
效果浏览:点击浏览效果
源码浏览:点击源码浏览
————————————————
版权声明:本文为CSDN博主「数星星等天明」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34414916/article/details/80029808
D3.js的v5版本入门教程(第七章)—— 比例尺的使用的更多相关文章
- D3.js的v5版本入门教程(第九章)——完整的柱状图
D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...
- D3.js的v5版本入门教程(第十三章)—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- D3.js的v5版本入门教程(第十一章)——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
- D3.js的v5版本入门教程(第八章)—— 坐标轴
D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...
- D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据
D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...
- D3.js的v5版本入门教程(第四章)—— 理解Update、Enter、Exit
D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...
- D3.js的v5版本入门教程(第十章)
在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...
随机推荐
- 2019 小米java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.小米等公司offer,岗位是Java后端开发,因为发展原因最终选择去了小米,入职一年时间了,也成为了面试官,之 ...
- Python DBUtils 连接池对象 (PooledDB)
数据处理框架用到 mysql, 需要在多进程中的多线程中使用 mysql 的连接 使用到的模块: DBUtils 实现: 使用 DBUtils 中的 PooledDB 类来实现. 自己写一个类, 继承 ...
- 在Windows中运行Linux bash命令的几种方法
如果你正在课程中正在学习 shell 脚本,那么需要使用 Linux 命令来练习命令和脚本. 你的学校实验室可能安装了 Linux,但是你自己没有安装了 Linux 的笔记本电脑,而是像其他人一样的 ...
- 【转载】C#中List集合使用Max()方法查找到最大值
在C#的List集合操作中,有时候需要查找到List集合中的最大值,此时可以使用List集合的扩展方法Max方法,Max方法有2种形式,一种是不带任何参数的形式,适用于一些值类型变量的List集合,另 ...
- 采用__call__ 实现装饰器模式
装饰器模式在实现中也是很常见的:比如手机贴膜,手机壳 都是为了给手机增加一些额外功能 增加耐操 装饰器模式的本质就是对对象二次包装,赋额外功能 __call__ __call__是python魔术方法 ...
- Pod和Namespace的基本介绍
namespace资源名称空间 删除namespace资源会级联删除其所包含的所有其它资源对象 名称空间仅仅只是用来限制资源名称的作用域 并不能实现Pod的通信隔离 在名称空间下操作s ...
- Linux理论小结
1.Linux是什么 2.Linux的种类 3.Linux的软件安装方法 4.Linux的软卸载方法 5.Linux的目录功能 1.Linux是什么 2.Linux的种类 3.Linux的软件安装方法 ...
- 查看Windows系统进程(PID)
语法:tasklist /svc 作用:打印系统进程,并显示其对应PID,可用来跟踪进程并根据PID来进行关闭.
- <choose><when><if>
--说明:choose类似于switch,其中的when如果不符合则进入otherwise(类似于default),可以结合if标签使用. -- <select> -- SELECT * ...
- 08 c++中运算符重载(未完成)
参考:轻松搞定c++语言 定义:赋予已有运算符多重含义,实现一名多用(比较函数重载) 运算符重载的本质是函数重载 重载函数的格式: 函数类型 operator 运算符名称(形参表列) { 重载实体 ...