坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。

D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

 

一、坐标轴构成

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

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

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

    • 路径 <path>

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

　　显然，这里面没有坐标轴 <axis> 这种元素。如果有的话，我们可以采用类似以下的方式定义：

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

<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([0, d3.max(dataset)])

      .range([0, 250]);

var axis = d3.svg.axis()

     .scale(linear)      //指定比例尺

     .orient("bottom")   //指定刻度的方向

     .ticks(7);          //指定刻度的数量

　　第 1 – 2 行：定义数组。

　　第 4 – 7 行：定义比例尺，其中使用了数组 dataset。

　　第 9 – 12 行：定义坐标轴，其中使用了线性比例尺 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>

</head> 

<style>

.axis path,

.axis line{

    fill: none;

    stroke: black;

    shape-rendering: crispEdges;

}

.axis text {

    font-family: sans-serif;

    font-size: 11px;

}

</style>

<body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>

        var width = 300;    //画布的宽度

        var height = 300;    //画布的高度

        var svg = d3.select("body")                //选择文档中的body元素

                    .append("svg")                //添加一个svg元素

                    .attr("width", width)        //设定宽度

                    .attr("height", height);    //设定高度

        var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

        var linear = d3.scale.linear()

                .domain([0, d3.max(dataset)])

                .range([0, 250]);

        var rectHeight = 25;    //每个矩形所占的像素高度(包括空白)

        svg.selectAll("rect")

            .data(dataset)

            .enter()

            .append("rect")

            .attr("x",20)

            .attr("y",function(d,i){

                return i * rectHeight;

            })

            .attr("width",function(d){

                return linear(d);

            })

            .attr("height",rectHeight-2)

            .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坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

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

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

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  3. D3.js的v5版本入门教程（第八章）—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  4. D3.js：坐标轴

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

  5. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  6. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  7. 【 D3.js 视频系列 】 飞速入门

    本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得 ...

  8. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  9. 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

随机推荐

  1. 移动端web出现的一系列问题

    今天做移动端的web,在做后期处理的时候,发现了非常多的问题.下面我分别列举一下吧~~ 1.移动端浏览器众多,各种浏览器之间的显示等都有差异,很多需要单独处理,于是我需要判断分别是什么浏览器.js代码 ...

  2. HashMap原理详解

    HashMap 概述 HashMap 是基于哈希表的 Map 接口的非同步实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.此类不保证映射的顺序,特别是它不保证该顺序恒久不 ...

  3. Combox控件初始化项的技巧

    有时候combox下拉项就是几条固定的,不需要做数据绑定,但是如果直接采用字符串集合编辑器的时候,SelectedValue貌似会不起作用. 于是简单的封装一下 /// <summary> ...

  4. Application_Error异常处理

    /// <summary> /// 捕捉异常 /// </summary> protected void Application_Error() { // 获得前一个异常的实例 ...

  5. C# .ToString() 格式化

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  6. 北邀 E Elegant String

    E. Elegant String Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 65536KB   64-bit integer ...

  7. 字符串转Json对象

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web.S ...

  8. Linux下新的网络管理工具ip替代ifconfig零压力

    如果你使用 Linux 足够久,那么你自然知道一些工具的来与去.2009年 Debian 开发者邮件列表宣布放弃使用缺乏维护的 net-tools 工具包正是如此.到今天 net-tools 仍然被部 ...

  9. head标签掉到body里的问题

    HTML最开始的标签   <!DOCTYPE html>在其之前不能有任何的内容,否则head里的内容就会掉到body里,导致譬如网站的图标icon无法更新等的功能问题

  10. PCL点云库：ICP算法

    ICP(Iterative Closest Point迭代最近点)算法是一种点集对点集配准方法.在VTK.PCL.MRPT.MeshLab等C++库或软件中都有实现,可以参见维基百科中的ICP Alg ...