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

时间：2021-07-06 06:01:31

　　比例尺是 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&period;js系列——初步使用、选择元素与绑定数据

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

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

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

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

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

  4. D3&period;js系列——布局：打包图和地图

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

  5. D3&period;js系列——布局：饼状图和力导向图

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

  6. D3&period;js系列——布局：弦图和集群图&sol;树状图

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

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

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

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

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

  9. D3&period;js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴&lpar;V3版本&rpar;

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

随机推荐

  1. Javascript的调试利器：Firebug使用详解

    转载自:http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx   一直在用firebug,可是没有这么精通,今天看到本文章觉得 ...

  2. mobile cpu上禁用alpha test的相关总结

       因为,每家芯片的特性不同,根据向framebuffer写法的不同,分为tile-based的mobile cpu,如ImgTec PowerVR,ARM Mali,一部分老版本Qualcomm  ...

  3. centos 安装 openerp

    遇到问题:近日公司提出openerp的搭建,觉得openerp里的有些模块比较适合公司,openerp的运作,估计会有利于公司系统化的管理.于是我就去了解openrp,然后来搭建这套强大的系统. 解决 ...

  4. 用户组，AD域控简介

    “*”的工作组    工作组(WORK GROUP)就是将不同的电脑按功能分别列入不同的组中,以方便管理.比如在一个网络内,可能有成百上千台工作电脑,如果这些电脑不进行分组,都列在“网上邻居”内,可 ...

  5. EL表达式取整

    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 1. <fm ...

  6. Mysql建库建用户建表等常用命令

    格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输 ...

  7. http stream

    http stream 博客分类: http://canofy.iteye.com/blog/2097876 j2EE   StringBuilder sb = new StringBuilder() ...

  8. Visio 安装

    网上下载了光盘镜像文件,点击setup 安装,但是弹出来说少了文件,,msxml6,,,什么一大串,, 在网上下载了一个文件,,就可以用了,,,MicrosoftFixit50927.msi

  9. MYSQL如何解决幻读

    第一部分 首先要了解下mysql数据库的事务特征之一隔离级别: READ UNCOMMITTED(未提交读): 在READUNCOMMITTED级别,事务中的修改,即使没有提交,对其他事务也都是可见的 ...

  10. JS获取鼠标左（右）滑事件

    鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("d ...

相关文章