比例尺是 D3 中很重要的一个概念。绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题。

一、为什么需要比例尺

  上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 给矩形的宽度赋值,即矩形的宽度就是 250 个像素。此方式非常具有局限性,如果数值过大或过小,例如:

var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ , , , , ];

  对以上两个数组,绝不可能用 2.5 个像素来代表矩形的宽度,那样根本看不见;也不可能用 2500 个像素来代表矩形的宽度,因为画布没有那么长。于是,我们需要一种计算关系,能够:将某一区域的值映射到另一区域,其大小关系不变。这就是比例尺(Scale)。

二、有哪些比例尺

  比例尺,很像数学中的函数。例如,对于一个一元二次函数,有 x 和 y 两个未知数,当 x 的值确定时,y 的值也就确定了。在数学中,x 的范围被称为定义域,y 的范围被称为值域

  D3 中的比例尺,也有定义域和值域,分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围,如此即可得到一个计算关系。

  D3 提供了多种比例尺,下面介绍最常用的两种。

1、线性比例尺

  线性比例尺,能将一个连续的区间,映射到另一区间。要解决柱形图宽度的问题,就需要线性比例尺。

  假设有以下数组,现有要求如下:将 dataset 中最小的值,映射成 0;将最大的值,映射成 300。代码如下:

        var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

        var min = d3.min(dataset);
var max = d3.max(dataset); var linear = d3.scale.linear()
.domain([min, max])//注意:domain()/range()里面是个数组形式哦
.range([0, 300]); linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300

  其中,d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数,它们经常与比例尺一起出现:

  d3.max() 、和d3.min():这两个函数能够求数组的最大值和最小值,是 D3 提供的。

  按照以上代码:比例尺的定义域 domain 为:[0.9, 3.3],比例尺的值域 range 为:[0, 300]

  因此,当输入 0.9 时,返回 0;当输入 3.3 时,返回 300。当输入 2.3 时呢?返回 175,这是按照线性函数的规则计算的。

  有一点请大家记住:d3.scale.linear() 的返回值,是可以当做函数来使用的。因此,才有这样的用法:linear(0.9)。

2、序数比例尺

  有时候,定义域和值域不一定是连续的。例如,有两个数组:

var index = [, , , , ];
var color = ["red", "blue", "green", "yellow", "black"];

  我们希望 0 对应颜色 red,1 对应 blue,依次类推。但是,这些值都是离散的,线性比例尺不适合,需要用到序数比例尺。

var ordinal = d3.scale.ordinal()
.domain(index)
.range(color); ordinal(); //返回 red
ordinal(); //返回 green
ordinal(); //返回 black

  序数比例尺:d3.scale.ordinal();用法与线性比例尺是类似的。

三、坐标轴由什么构成

   坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成。D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

  在 SVG 画布的预定义元素里,有六种基本图形:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线段 <line>
  • 折线 <polyline>
  • 多边形 <polygon>

  另外,还有一种比较特殊,也是功能最强的元素:

  • 路径 <path>

  画布中的所有图形,都是由以上七种元素组成。

  显然,这里面没有坐标轴 <axis> 这种元素。如果有的话,我们可以采用类似以下的方式定义:<axis x1="" x2="" ...></axis>,很可惜,没有这种元素。但是,这种设计是合理的:不可能为每一种图形都配备一个单独的元素,那样 SVG 就会过于庞大。

  因此,我们需要用其他元素来组合成坐标轴,最终使其变为类似以下的形式:

<g>
<!-- 第一个刻度 -->
<g>
<line></line> <!-- 第一个刻度的直线 -->
<text></text> <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line> <!-- 第二个刻度的直线 -->
<text></text> <!-- 第二个刻度的文字 -->
</g>
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

  分组元素 <g>,是 SVG 画布中的元素,意思是 group。此元素是将其他元素进行组合的容器,在这里是用于将坐标轴的其他元素分组存放。

  如果需要手动添加这些元素就太麻烦了,为此,D3 提供了一个组件:d3.svg.axis()。它为我们完成了以上工作。

四、定义坐标轴

  上一章提到了比例尺的概念,要生成坐标轴,需要用到比例尺,它们二者经常是一起使用的。下面,在上一章的数据和比例尺的基础上,添加一个坐标轴的组件。

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
.domain([, d3.max(dataset)])
.range([, ]); var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(); //指定刻度的数量

  主要看下定义坐标轴的方法,其中使用了线性比例尺 linear。其中:

  d3.svg.axis():D3 中坐标轴的组件,能够在 SVG 中生成组成坐标轴的元素。

  scale():指定比例尺。

  orient():指定刻度的朝向,bottom 表示在坐标轴的下方显示。

  ticks():指定刻度的数量。

五、在 SVG 中添加坐标轴

  定义了坐标轴之后,只需要在 SVG 中添加一个分组元素 <g>,再将坐标轴的其他元素添加到这个 <g> 里即可。代码如下:

svg.append("g")
.call(axis);

  上面有一个 call() 函数,其参数是前面定义的坐标轴 axis。在 D3 中,call() 的参数是一个函数。调用之后,将当前的选择集作为参数传递给此函数。也就是说,以下两段代码是相等的。

function foo(selection) {
selection
.attr("name1", "value1")
.attr("name2", "value2");
}
foo(d3.selectAll("div"));
//等价于
d3.selectAll("div").call(foo); svg.append("g").call(axis);
//等价于
axis(svg.append(g));

六、设定坐标轴的样式和位置

  默认的坐标轴样式不太美观,下面提供一个常见的样式:

<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
} .axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>

  分别定义了类 axis 下的 path、line、text 元素的样式。接下来,只需要将坐标轴的类设定为 axis 即可。

  坐标轴的位置,可以通过 transform 属性来设定。通常在添加元素的时候就一并设定,写成如下形式:

svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);

七、应用

<html>
<head>
<meta charset="utf-8">
<title>比例尺和坐标轴</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
} .axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = ; //画布的宽度
var height = ; //画布的高度 var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度 var dataset = [ 2.5 , 2.1 , 1.8 , 1.3 , 0.9 ]; //数据(表示矩形的宽度)
var linear = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,250]);
var rectHeight = ; //每个矩形所占的像素高度(包括空白) svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return linear(d); // 此处应用比例尺
})
.attr("height",rectHeight-)
.attr("fill","steelblue"); //添加坐标轴
var axis = d3.svg.axis()
.scale(linear)
.orient("bottom")
.ticks(7);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
</script>
</body>
</html>

D3.js系列——比例尺和坐标轴的更多相关文章

  1. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  2. 文章预告的自我挖坑系列——D3.js 系列之星光闪烁

    D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691      星空 二维(一)h ...

  3. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  4. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  5. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  6. D3.js系列——布局:弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  7. D3.js系列——交互式操作和布局

    一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更 ...

  8. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  9. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

随机推荐

  1. [Leetcode Week11]Kth Largest Element in an Array

    Kth Largest Element in an Array 题解 题目来源:https://leetcode.com/problems/kth-largest-element-in-an-arra ...

  2. OpenWRT介绍

    1. 介绍 OpenWRT是一款第三方路由器固件, 其特别在于开放性, 如它的文件系统可写, 用户可在路由器上安装需要的第三方软件.通过刷入OpenWRT, 我们可以完成如下事情 - DLNA共享 - ...

  3. windows下nginx安装及使用

    nginx简介: nginx是一款轻量级web服务器,也是一款反向代理服务器(比如域名转发等). nginx功能: 1.可直接支持Rails和PHP的程序. 2.可作为HTTP反向代理服务器. 3.作 ...

  4. boost::bind的简单实现

    前言 在上一篇blog中简单的实现了boost::function,支持带有2个参数的函数/函数指针,函数对象,函数适配器/bind类,以及带有1个参数的成员函数指针. 本文接着来介绍如何实现一个简单 ...

  5. 转载:document.execCommand()的用法小记

    首先要说明的是在firefox下支持不好.2D-Position 允许通过拖曳移动绝对定位的对象. AbsolutePosition 设定元素的 position 属性为“absolute”(绝对). ...

  6. bootstrapValidator关于verbose需要优化的地方

    开发中需要用到bootstrapValidator的配置verbose:false,达到当前验证不通过不往下在验证的效果 问题: 当前字段需要remote验证时,此配置无效,原因在于remote是异步 ...

  7. tushare 安装

    1.pip install lxml 2.pip install pandas 3.pip install requests 4.pip install lxml 5.pip install tush ...

  8. 《锋利的JQuery》读书要点笔记2——DOM操作

    第三章 jQuery中的DOM操作 3.1 DOM(Document Object Model)操作的分类 1. DOM Core    例如:document.getElementsByTagNam ...

  9. selenium 难定位元素,时间插件,下拉框定位,string包含,定位列表中的一个,技巧

    关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...

  10. POJ 1008 Maya Calendar / UVA 300【日期转换/常量数组】

    Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 82431 Accepted: 25319 Descr ...