线性比例尺

线性比例尺是常用比例尺常用方法有:

var linear = d3.scaleLinear() - 创建一个定量的线性比例尺.

linear.domain([numbers]) - 定义或获取定义域

linear.range([values]) - 定义或获取值域

linear(x) - 输入一个定义域内的值,返回一个值域的值

linear.invert(y) - 输入一个值域的值,返回一个定义域的值

linear.rangeRound([values]) - 代替range(), 比例尺的输出值会进行四舍五入返回整型

linear.clamp([boolean]) - 默认flase,当比例尺接受一个超出定义域范围的值当时候,依然能够按照同样的计算方法得到一个值,这个值是超出值域范围的。设置为true,则所有超出值域范围的值,都会被收缩到值域之内。

linear.nice([count]) - 将定义域的值扩展成比较理想的值并非四舍五入

linear.ticks([count]) - 设定或获取坐标轴刻度

大致的使用形式:

var linear = d3.scaleLinear().domain([0, 90]).rangeRound([0, 100]).clamp(true);
console.log(linear(95)); // 100
console.log(linear.nice().ticks(9)); //[0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(linear.range()); //[0, 100]

指数,量子,阈值比例尺

比例尺中很多方法都是相同的,例如domain(), range(), invert()等,名称和作用都是相同的,下面指出一些不同的地方。

指数比例尺

相对线性比例尺多出一个exponent()用于指定指数。使用方法如下:

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
console.log(pow(2)); //27

指数为3,输入为2。这段代码中相当于定义一个线性比例尺。定义域为[0, 27], 值域为[0, 90],当计算2的3次方得到的结果为8,在对这个结果应用线性比例尺,最终到27,验证着一点,请看如下代码:

var pow = d3.scalePow().exponent(3).domain([0, 3]).rangeRound([0, 90]);
var linear = d3.scaleLinear().domain([0, Math.pow(3, 3)]).rangeRound([0, 90]);
console.log(pow(2)); //27
console.log(linear(Math.pow(2, 3))); //27

量子比例尺

量子比例尺定义域是连续的。值域是离散的,结果是对应的离散值。

var quantize = d3.scaleQuantize().domain([0, 10]).range(['a', 'b', 'c', 'd', 'e']);
console.log(quantize(1)) //a
console.log(quantize(4.1)) //c

使用量子比例尺后定义域将被分成[0, 2],[2, 4],[4, 6],[6, 8],[8, 10]这5段,分别对应值域的5个值。量子比例尺非常适合处理‘数值对应颜色’的问题

阈值比例尺

阈值比例尺和量子比例尺类似,阈值比例尺是将连续的定义域映射到离散的值域里。

var threshold = d3.scaleThreshold().domain([0, 2, 4, 6, 8]).range(['a', 'b', 'c', 'd', 'e']);
console.log(threshold(3)) //c
console.log(threshold.invertExtent('b')) // [0, 2]

量子和阈值十分相似,都是将连续的定义域映射到离散的值域里。

序数比例尺

序数比例尺

序数比例尺的定义域和值域都是离散的,通过输入一些离散的值(如名称,序号,ID号等),要得到另一些离散的值(如颜色,头衔等),这时就要考虑序数比例尺。常用方法有:

var ordinal = d3. scaleOrdinal() - 创建一个序数比例尺.

ordinal(x) - 根据输入值计算对应的输出值.

ordinal.domain([values]) - 设置输入范围.

ordinal.range([values]) - 设置输出范围.

ordinal.unknown([values]) - 设置未知输入的输出值.
大致的使用形式:

var ordinal = d3.scaleOrdinal().domain(['a', 'b', 'c', 'd', 'e']).range([0, 2, 4, 6, 8]).unknown('超出输入范围');
console.log(ordinal('a')) // 0
console.log(ordinal('g')) // 超出输入范围

坐标轴

坐标轴组件可以将scales显示为人类友好的刻度标尺参考,减轻了在可视化中的视觉任务。坐标轴相关的常用方法如下。
d3.axisLeft(linear) - 使用给定的 scale 构建一个刻度在左的坐标轴生成器

d3.axisBottom(linear) - 使用给定的 scale 构建一个刻度在下的坐标轴生成器

d3.axisRight(linear) - 使用给定的 scale 构建一个刻度在右的坐标轴生成器

d3.axisTop(linear) - 使用给定的 scale 构建一个刻度在上的坐标轴生成器

axis.ticks([argument...]) - 设定或获取坐标轴的分割数。

axis.tickValues([argument...]) - 指定 values 数组,则使用指定的数组作为刻度而不是自动计算刻度

axis.tickPadding([padding]) - 设置刻度和刻度文本之间的间距

大致的使用形式:

var linear = d3.scaleLinear().domain([1000, 0]).rangeRound([0, 250])
var axisLeft = d3.axisLeft(linear).ticks(4);
var svg = d3.select('#axis').append('svg').attr('width', '400').attr('height', '300');
var gLeft = svg.append("g").attr("transform", "translate(40, 20)").call(axisLeft);

交互式数据可视化-D3.js(三)比例尺的更多相关文章

  1. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  2. 交互式数据可视化-D3.js(四)形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  3. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  4. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  5. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  6. 交互式数据可视化-D3.js(二)选择集和数据

    选择集 select和selectAll类似jquery: d3.select('body') d3.select('.body') d3.select('#body') d3.selectAll(' ...

  7. 数据可视化d3.v4.js

    <html> <head> <meta charset="utf-8"> <title>做一个简单的条形图</title> ...

  8. 干货 | Bokeh交互式数据可视化快速入门

    Bokeh简介 Bokeh是一款交互式可视化库,在浏览器上进行展示. Bokeh可以通过Python(或其它语言),快速便捷地为大型流数据集提供优雅简洁的高性能交互式图表. 安装 在python中有多 ...

  9. 数据可视化实例(三): 散点图(pandas,matplotlib,numpy)

    关联 (Correlation) 关联图表用于可视化2个或更多变量之间的关系. 也就是说,一个变量如何相对于另一个变化. 散点图(Scatter plot) 散点图是用于研究两个变量之间关系的经典的和 ...

随机推荐

  1. <转>常规测试方法

    功能测试 1. 安装测试: 安装过程中对于缺省安装目录及任意指定的安装目录,是否都能正确安装: 若是选择安装,查看能否实现其相应的功能: 在所有能中途退出安装的位置退出安装程序后,验证此程序并未安装成 ...

  2. 升级Nginx1.14.1以上版本

    一.编译Nginx ①.下载Nginx最新版 目前Nginx最新版是今年11月份发布的 1.9.7 版本,反正1.9+是没有稳定版,所以干脆弄个最新版:   cd /usr/local/src   w ...

  3. np的concatenate和pandas的groupby

    1. concatenate concatenate函数可以实现对两个张量进行拼接,这个张量可以实一维向量,二维矩阵等等 1. 首先定义四个列表,然后用concatenate把他们拼接起来,这里我设a ...

  4. PhpMyAdmin提示未加密

    新版本的PhpMyAdmin 增强了安全性,需要在配置文件设置一个短语密码.否则进入之后会有“配置文件现在需要一个短语密码.”的红色警叹提示. 解决方法: .将 phpMyAdmin/librarie ...

  5. 熟悉GitHub、VS工具的使用(《构建之法》第二次作业)

    GIT地址 https://github.com/slothph GIT用户名 slothph 学号后五位    62323 博客地址 https://www.cnblogs.com/slothph/ ...

  6. Spread.NET 表格控件 V12.1 正式发布

    Spread.NET 表格控件 V12.1 正式发布 加入动态数组,让公式运算更具效率 Spread.NET 是一个在功能和布局上与 Excel 高度类似的 .NET表格控件,目前已广泛应用于财务.预 ...

  7. ASP.NET Core中使用Autofac进行属性注入

    一些无关紧要的废话: 作为一名双修程序员(自封的),喜欢那种使用Spring的注解形式进行依赖注入或者Unity的特性形式进行依赖注入,当然,形式大同小异,但结果都是一样的,通过属性进行依赖注入. A ...

  8. # log对数Hash映射优化

    log对数Hash映射优化 利用了一个数学技巧:$\forall k \in [0,35],2^{k} mod 37 互不相等,且恰好取遍整数1-36 $ 应用:将int范围内的\(2^k映射到k\) ...

  9. Ubuntu 系统安装 Docker

    安装 Docker CE 有多种方法,下面是最简单的通过Docker仓库的安装方法,其他方法参见官方文档. 设置仓库 刷新软件包 sudo apt-get update 安装必要的软件包 sudo a ...

  10. SqlSugar

    SqlSugar 官网 SqlSugar 源码 SqlSugar NuGet