【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )

上一章中使用了一个很重要的概念 — 比例尺( scale ),本节将解说其使用方法。

1. 最大值和最小值

在介绍比例尺( scale )之前,先介绍两个经常和比例尺一起出现的函数,在【第3章】中也出现了。

  • 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[1]; } );

如此,返回的值为 20 , 因为比较的是 20 , 2 , 11 这三个数,最后一行的 d[1] 表示指定每一个数组的第二个值。

2. 比例尺

接下来说明 scale (比例尺)的用法,首先要明确一点: scale 是函数,不错,是函数。

为什么要使用 scale 呢?假设现在要为一个汽车公司做数据可视化,要将每月的汽车销量用柱形图表示,假设这个月有 100 销量,用 100 个像素长度的柱子来表示。下个月 500 销量,用 500 个像素表示,再下个月有 3000 台呢?不可能用3000个像素,浏览器长度也不够。这时候就要用到 scale (比例尺)了。

在 scale 中,给定一个 domain (定义域),给定一个 range (值域) ,即可进行数值之间的转换。

最常用的 scale 是线性函数。它的用法如下:

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 是一个函数。

domain 和 range 最少放入两个数,可以超过两个数,但两者的数量必须相等,如下为放入3个数的情况:

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();

上面介绍的是最常用的线性函数的 scale ,其他还有 sqrt ,pow,log,quantize,ordinal 等等各种 scale。 需要的时候可查询官方 API 。

时间: 2024-11-08 18:25:20

【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )的相关文章

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候,通常会用到以上代码,这一节就详细说说当被选择元素和数据数量不一致时该如何处理. 这一节将涉及到三个函数.

【 D3.js 入门系列 --- 10 】 地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s

【 D3.js 入门系列 — 0 】 简介和安装

[ D3.js 入门系列 — 0 ] 简介和安装 发表于2014/06/12 近年来,可视化越来越流行,许多报刊杂志.门户网站.新闻.媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,的确是名副其实.各种数据可视化工具也如井喷式地发展,D3 正是其中的佼佼者. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript

【 D3.js 入门系列 --- 9.5 】 树状图的制作

这一节学习树状图的制作.树状图的制作和集群图完全相同,经过这两种 layout 转换后的数据也很相似. 本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 树状图( Tree )通常用于表示层级.上下级.包含与被包含关系.树状图的制作和 9.4节集群图的制作 的代码几乎完全一样.不错,你没看错,几乎完全一样.那么为什么要把这两种图分开,它们有什么不同呢?先来看看对于同一组数据,它们的结果有什么不同.数据为: {

【 D3.js 入门系列 --- 9.3 】 弦图的制作

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 弦图( Chord ),主要用于表示两个节点之间的联系.如下图: 两点之间的连线表示,谁和谁具有联系: 线的粗细表示权重: 上面的介绍源于: http://circos.ca/guide/tables/  ,我就不详细介绍了,还是很好理解的. 那么在 D3 中怎么用 layout 转换出弦图所需要的数据,并作图呢?请耐心往下看. 1. 首先给出数据 var ci

【 D3.js 入门系列 --- 9 】 常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据.实际进行可视化时,需要其他的代码.我们可以简单地把 Layout 理解为"制作常见图形的函数",比如饼状图等等. D3 中一共提供了

【 D3.js 入门系列 — 11 】 入门总结

D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作. D3.js 最早的 v1.0 版本号是由 Michael Bostock 于2011年2月18日公布,其后经过多人的不断完好,眼下最新的版本号为 v3.4.11.从公布至今三年多的时间里,D3.js 在国外不断有人尝试并制作教程.成为了流行的数据可视化工具.可是眼下在国内能查询到中文资料还比較少

【 D3.js 入门系列 --- 0 】 简介及安装

家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-Driven Documents),顾名思义能够知道是一个关于数据驱动的文档的javascript类库.假设你不知道什么是javascript.请先学习javascript的相关知识. 说得简单一点,D3.js主要是用于操作数据的,它通过使用HTML.SVG.CSS来给你的数据注入生命,即转换为各种简

【 D3.js 入门系列 — 10.3 】 GeoJSON 文件和 TopoJSON 文件的区别和联系

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前些天有朋友留言询问 GeoJSON 文件和 TopoJSON 文件的关系,正好我其实也不是十分明了,查询了一番后整理如下,还望大家指证. 这两种文件都是基于 JSON 语法的,首先来说一下 JSON 语法和文件是怎样的. 1. JSON 格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读