坐标轴(Axis)
 
坐标轴(Axis)在很多图表中都可见到，例如柱形图、折线图、散点图等。坐标轴由一组线段和文字组成，坐标轴上的点由一个坐标值确定。但是，如果使用SVG的直线和文字一笔一画的绘制坐标轴，工作量将会极其的大。D3提供了坐标轴的制作方法，需要之前所给大家讲的比例尺一起使用。开发者仅仅需要几行代码，就能够生成各式各样的坐标轴。
 
与坐标轴相关的方法有:
 
d3.svg.axis() :
创建一个默认的新坐标轴。
 
axis(selection) :
将此坐标轴应用到指定的选择集上，该选择集需要包含有<svg>或<g>元素。
 
axis.scale([scale]) :
设定或获取坐标轴的比例尺。
 
axis.orient([orientation]) :
设定或获取坐标轴的方向，有四个值:top、bottom、left、right。top表示水平坐标轴的刻度在直线下方。bottom表示水平坐标轴的刻度在直线上方。left表示垂直坐标轴的刻度在直线右方。right表示垂直坐标轴的刻度在直线左方。
 
axis.ticks([argument...]) :
设定或获取坐标轴的分隔数，默认为10.例如设定为5，则坐标轴上的刻度数量为6，分段数为5.这个函数会调用比例尺的ticks()
 
axis.tickValues([values]) :
设定或获取坐标轴的指定刻度。例如，参数为[1,2,3,6,7,8]，则在这几个值上会有刻度。
 
axis.tickSize([inner,outer]):
设定或获取坐标轴的内外刻度的长度。默认都为6
 
axis.innerTickSize([size]) :
设定或获取坐标轴的内刻度的长度。内刻度指不是两端的刻度。
 
axis.outerTickSize([size]) :
设定或获取坐标轴的外刻度的长度。外刻度指两端的刻度。
 
asix.tickFormat([format]) :
设定或获取刻度的格式。
 
 
坐标轴的绘制方法:
在之前给大家介绍过，在SVG中有<path>、<line>、<text>元素，D3所绘制的坐标轴就是由这三中元素组成的。其中，坐标轴的主直线是由<path>绘制的。刻度是由<line>绘制的。刻度文字是由<text>所绘制的。举个例子:
 
  　　　　var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         // 用于坐标轴的线性比例尺

         var xScale = d3.scale.linear()

                             .domain([0,10])

                             .range([0,300])

         // 定义坐标轴

         var axisBottom = d3.svg.axis()

                              .scale(xScale)      //使用上面定义的比例尺

                              .orient("bottom")   //刻度方向向下

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")　　　　　　　　　　　　

         //在gAxis中绘制坐标轴

         axisBottom(gAxis)
坐标轴的所有图形元素需放入<svg>或<g>里，建议新建一个g元素来控制，而不要直接放在<svg>里，因为<svg>中通常还包含有其他的图形元素。上面代码中，先在<body>中添加了<svg>，然后再在<svg>中添加了<g>，坐标轴就绘制在这个<g>中。绘制之后body中的元素结构如图所示: 
 
 
 
class为tick的<g>元素就是刻度，每一个刻度里都包含有<line>和<text>。坐标轴的主直线是最下方的<path>,其class是demain。
 
xScale是一个线性比例尺，其定义域为[0,10]，这是坐标轴刻度值的范围。值域为[0,300]，这是坐标轴实际的像素长度。定义坐标轴时。使用scale(sScale)指定比例尺。代码的最后一行，axis(gAxis)表示的是在gAxis选择集中绘制坐标轴，gAxis是在<svg>中新添加的分组元素。结果如图:
 
 
看到图后是不是觉得这坐标轴太丑了 ~ ~ 而且刻度直线都没有显示出来。这是因为还没有为坐标轴定制样式，首先定义class类名，上面代码第23行处。然后写css代码:
 
    .axis path{

         fill:none;

         stroke : black;

         shape-rendering:crispEdges;

     }

     .axis line{

         fill:none;

         stroke : black;

         shape-rendering:crispEdges;

     }

     .axis text{

         font-family: sans-serif;

         font-size: 11px;

     }
现在再看一下效果图: 
 
 
现在比之前要美观多了。上面使用了axis(gAxis)的方式来指定绘制的位置。除此之外，还有一种常用的方式。就是之前讲过的call()。gAxis.call(axis)。这种方式的调用以后会很常用的。
 
坐标轴 刻度
说到坐标轴的属性，基本上是在说刻度，例如刻度的方向、间隔、长度、文字格式等。上次给大家讲的坐标轴，设置了刻度的方向orientation("bottom")，因此刻度在直线的下方。如果要设置在什么值上标出刻度，使用ticks()和tickValues()。举个例子:
 
 　　　　 var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的线性比例尺

         var xScale = d3.scale.linear()

                             .domain([0,10])

                             .range([0,300])

         //定义坐标轴

         var axisLeft = d3.svg.axis()

                             .scale(xScale)

                             .orient("left")  //刻度方向向左

                             .ticks(5)

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axisLeft(gAxis)
效果图:
 
 
 
再举个例子:
 
 　　　　 var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的线性比例尺

         var xScale = d3.scale.linear()

                             .domain([0,10])

                             .range([0,300])

         //定义坐标轴

         var axisRight = d3.svg.axis()

                             .scale(xScale)

                             .orient("right")    //刻度方向向右

                             .tickValues([3,4,5,6,7])            

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axisRight(gAxis)
效果图:
 
 
 
比例尺scale的定义域为[0,10]。上面两个例子定义了两个坐标轴，刻度分别位于左边和右边，刻度值分别用ticks()和tickValues()来指定。注意刻度的区别。
 
上面绘制的坐标轴，刻度的直线都是相同长度的:有时候也需要不同的长度的,最常见的是首位两个刻度的长度比内部要长。此时需要用到tickSize()，举个例子:
 
  　　　　var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的线性比例尺

         var xScale = d3.scale.linear()

                             .domain([0,10])

                             .range([0,300])

         //定义坐标轴

         var axiosTop = d3.svg.axis()

                         .scale(xScale)

                         .orient("top")  //刻度方向向上

                         .ticks(5)

                         .tickSize(2,4)

19　　　　　　　　　　　　　　　.tickFormat(d3.format("$0.1f"))

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axiosTop(gAxis)
tickSize()的第一个参数是内部刻度的直线长度，第二个参数是首尾两个刻度的直线长度。也可以用innerTickSize()和outerTickSize()分别进行设置。如图，两端的刻度线比内部的要长。
 
 
 
刻度文字的格式通过tickFormat()设置，此外还需要用到d3.format()，它返回的对象作为tickFormat()的参数。在d3.format()的参数里，可指定刻度文字的格式。例如在上面代码第19行处添加.tickFormat(d3.format("$0.1f")) ,然后看一下效果图:
 
 
文字格式的规则遵循迷你语言的格式规范。
 
 
各比例尺的坐标轴
坐标轴必须要设置一个比例尺，根据比例尺的不同可以得到不同的坐标轴。使用的最多的是线性比例尺。下面来看看随着比例尺的不同，坐标轴的刻度是怎样变化的。
 
一 、 线性比例尺的坐标轴:
 
代码 : 
 
  　　　　var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的比例尺

         // 线性比例尺

         var xScaleLine = d3.scale.linear()

                         .domain([0,1])

                         .range([0,500])

         //定义坐标轴

         var axisBottomLine = d3.svg.axis()

                              .scale(xScaleLine)      //使用上面定义的比例尺

                              .orient("bottom")       //刻度方向向下

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axisBottomLine(gAxis)
效果图:
 
 
 
二 、 指数比例尺的坐标轴:
 
代码:
 
 　　　　 var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的比例尺

         // 指数比例尺

         var xScalePow = d3.scale.pow()

                         .exponent(2)

                         .domain([0,1])

                         .range([0,500])

         //定义坐标轴

         var axisBottompPow = d3.svg.axis()

                              .scale(xScalePow)      //使用上面定义的比例尺

                              .orient("bottom")      //刻度方向向下

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axisBottompPow(gAxis)

效果图:

三 、 对数比例尺的坐标轴:

代码 :

  　　　　var width = 600;

         var height = 600;

         var svg = d3.select("#body")

                     .append("svg")

                     .attr("width",width)

                     .attr("height",height)

         //用于坐标轴的比例尺

         var xScaleLog = d3.scale.log()

                             .domain([0.01,1])

                             .range([0,500])

         //定义坐标轴

         var axisBottomLog = d3.svg.axis()

                              .scale(xScaleLog)      //使用上面定义的比例尺

                              .orient("bottom")      //刻度方向向下

         //在svg中添加一个包含坐标轴各元素的g元素

         var gAxis = svg.append("g")

                     .attr("transform","translate(80,80)")    //平移到(80,80)

                     .attr("class","axis")

         //在gAxis中绘制坐标轴

         axisBottomLog(gAxis)

效果图:

其他比例尺下的坐标轴大家可以自己去试一下。

下一章给大家做一个带比例尺、坐标轴的柱形图。

 
 
 
 
 
 

D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)的更多相关文章

  1. D3.js的基础部分之数组的处理 数组的排序和求值(v3版本)

    操作数组   D3提供了将数组洗牌.合并等操作,使用起来是很方便的.   d3.shuffle(array,[,lo[,ji]]) : //随机排列数组. d3.merge(arrays) :   / ...

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

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  3. D3.js 其他选择元素方法

    在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> ...

  4. js将多个方法添加到window对象上的多种方法

    方法一:(最简单也是最笨的方法) window.a = function(){}window.b = function(){}window.c = function(){} 方法二:(利用jq的ext ...

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

    定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...

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

    上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html   这一章做散点图.   散点图(Scatter Chart),通常是一横一竖 ...

  7. D3.js 坐标轴

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

  8. [js]d3.js绘制拓扑树

    echart也支持拓扑树了 所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树 数据格式: nodes: {id, label, title} edges: {from, t ...

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

    上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定 ...

随机推荐

  1. (15)centos7 系统服务

    centos7 服务启动脚本在 /usr/lib/systemd目录下 1.服务基本操作指令 systemclt [command] [unit] #其中command包括: #start 立即启动 ...

  2. jmter 5.1 中文

    一.jmeter5.0下载解压后,默认的界面是英文版的,许多人觉得不方便,想要汉化,jmeter是不需要安装汉化包的,通过修改配置文件即可:1.找到jmeter解压后的文件夹,例如我是安装在D:\De ...

  3. 服务器安装TeamViewer 13

    服务器安装TeamViewer 13 服务器上安装TeamViewer,网上找了个教程开始安装,里面有坑,安装时要根据自己的情况而定.Linux系统更新太快,网上教程可能会有一些出入. TeamVie ...

  4. 2019杭电多校第四场hdu6621 K-th Closest Distance(二分答案+主席树)

    K-th Closest Distance 题目传送门 解题思路 二分答案+主席树 先建主席树,然后二分答案mid,在l和r的区间内查询[p-mid, p+mid]的范围内的数的个数,如果大于k则说明 ...

  5. 第十一篇 session和cookie自动登录机制

    session和cookie的作用和区别可以在网上查到,这里简单说下,我们使用的http协议本身是种无状态的协议,就是说web服务器接收到浏览器的请求,会直接返回相应内容,并不会检查是哪个浏览器,即浏 ...

  6. python接口自动化（响应对象方法）

    python接口自动化(响应对象方法) 一.encoding作用 获取请求的编码(在不设置响应编码时,响应的信息默认使用的是请求的编码格式):r.encoding 设置响应的编码:r.encoding ...

  7. OAuth2.0实例说明

    OAuth2.0 详细实列+Word文档清晰说明 实例下载地址:https://files.cnblogs.com/files/liyanbofly/OAuth2.0%E5%AE%9E%E4%BE%8 ...

  8. vimtutor - Vim 教程

    总览 (SYNOPSIS) vimtutor 描述 (DESCRIPTION) Vimtutor 打开 Vim 教程. 它首先 考备 文件, 这样 就可以 在 不改变 原文件 的情况下 修改 当前文件 ...

  9. struts2类型转换1

    概述 从一个 HTML 表单到一个 Action 对象, 类型转换是从字符串到非字符串. HTTP 没有 “类型” 的概念. 每一项表单输入只可能是一个字符串或一个字符串数组. 在服务器端, 必须把 ...

  10. svn 一、 安装及汉化

    svn 是日常开发过程中常用的版本控制工具 第一步 安装 进入官网 https://tortoisesvn.net/ 点击downloads 进入之后选中 需要的版本,及位数 这里推荐安装最新版的 因 ...