坐标轴(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. CSS：CSS 链接

    ylbtech-CSS:CSS 链接 1.返回顶部 1. CSS 链接 不同的链接可以有不同的样式. 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式 ...

  2. 关于类中的参数类型和return返回值

    基础有些忘了,现在重新巩固一下 先定义一个Person类 class Person(): def __init__(self,name,age,height): self.name=name, sel ...

  3. 2-数据分析-matplotlib-1-概述

    1.matplotlib: 最流行的Python底层绘图库,主要做数据可视化图表,名字取材于MATLAB,模仿MATLAB构建. 2.学习matplotlib的意义: (1)能将数据进行可视化,更直观 ...

  4. 牛客OI月赛12-提高组题解

    牛客OI月赛12-提高组 当天晚上被\(loli\)要求去打了某高端oj部分原创的模拟赛,第二天看了牛客的题觉得非常清真,于是就去写了 不难发现现场写出\(260\text{pts}\)并不需要动脑子 ...

  5. springBoot优雅返回图片/网页到浏览器

    一.普通spring mvc返回图片或网页到浏览器 @Controller @RequestMapping(value = "/image") public class Image ...

  6. python代码{v: k for k, v in myArray.items()}是什么意思？

    最近在扒vnpy的源码总能看到{v: k for k, v in ORDERTYPE_VT2HUOBI.items()}这样的源码,就是不知道什么意思 然后万能的google找到了Quora的一个类似 ...

  7. Spring Cloud (Spring Cloud Stream)解析

    执行脚本目录 /bin windows 在其单独的目录 快速上手 下载并且解压kafka压缩包 运行服务 以Windows为例,首先打开cmd: 1.  启动zookeeper: bin\window ...

  8. leetcode-168周赛-1295-统计位数为偶数的数字

    题目描述: 方法一:O(N) class Solution: def findNumbers(self, nums: List[int]) -> int: ans=0 for num in nu ...

  9. 【JZOJ6421】匹配

    description analysis 对于普通树形\(DP\)可以设\(f[i][0/1],g[i][0/1]\)表示\([1,i]\)的线段树的最大值.方案数 \(0\)表示不选择根与某个儿子相 ...

  10. Java——Eclipse使用

    从这开始使用IDE啦~ ①File → New → Java Project →填写工程名字,选择jdk版本,其他默认,单击finish. ②在Src(源文件)上鼠标右键 → new → packag ...