【D3.js 比例尺的使用】的更多相关文章

D3.js 比例尺的使用

比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素.此方式非常具有局限性,如果数值过大或过小,例如: var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; var dataset_2 = [ 2500, 21…

D3.js比例尺 序数比例尺(v3版本)

上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定量比例尺的定义域都是连续的,值域有连续的也有离散的.序数比例尺(Ordinal Scale)的定义域和值域都是离散的.   现实中会有这样的需求,通过输入一些离散的值(如名称.序号.ID等),要得到另一些离散的值(如颜色等),这种时候就要考虑序数比例尺了. 序数比例尺的方法有:   d3.scale…

D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)

定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图形是一条直线,如果限制x的范围为[0,2],则可计算得到y的范围为[1,5].x的范围[0,2]称为该函数的定义域,y的范围称为该函数的值域.根据x计算得到y的方法称为对应法则.定义域.值域.对应法则称为函数的三要素.   在数据可视化中,常需要像上述函数一样,将一个量转换为另一个量.D3提供了这样…

D3.js的v5版本入门教程（第七章）—— 比例尺的使用

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺 线性比例尺序数比例尺        线性比例尺 domain域和range域都可以连续变化 <body> <sc…

D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,…

【 D3.js 视频系列 】 飞速入门

本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得较好的朋友不必观看本教程.本系列的具体内容如下,点击标题即可进入百度云页面观看.如果百度云网盘的在线播放中出现清晰度不足的情况,请下载后再观看. 1. 第一个D3程序 D3的简介和安装.服务器软件的安装.初学者应注意的问题.一个简单的D3程序. 源代码:src.zip 2. 制作柱形图 选择集.数据绑定.柱形…

【 D3.js 高级系列 — 6.0 】 值域和颜色

在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] 现希望10用浅绿表示,500用深绿表示,10到500之间的值用浅绿和深绿之间的颜色表示.显然,此处需要一个函数,传入的参数是10到500之间的值,返回值是浅绿到深绿之间的颜色值. [高级 - 第 5.1 章]介绍的颜色插值函数正好可以派上用场. var palegreen = d3.rgb(66,2…

【 D3.js 高级系列 — 3.0 】 堆栈图

堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑.智能手机.软件. 2005年,三种产品的利润分别为3000.2000.1100万. 2006年,三种产品的利润分别为1300.4000.1700万. 计算可得,2005年总利润为6100万,2006年为7000万. 如果要将2005年的利润用柱形表示,那么应该画三个矩形,三个矩形堆叠在一起.这时候就…

【 D3.js 高级系列 — 2.0 】 捆图

捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbostock/1044242 但是此例有些复杂,不太容易弄懂,而且也没有相应的说明文字(D3官网上的例大多没有相应文字解说),根本无法作为参考.本文提供一个简单的例子,讲解捆图到底是什么,应该怎么做. 捆图只有两个函数: d3.layout.bundle():创建一个捆图布局. bundle(link…

【 D3.js 进阶系列 — 5.0 】 直方图

直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~20的数值范围分为5段,即: 10~12, 12~14, 14~16, 16~18, 18~20 那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,能够知道,这5段分别具有的元素个数为: 3, 2, 1, 0 , 2 将这个用图形展示出来的,就是直方图.好了,開始制作吧~ 1. 数据 首先…