坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 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. SlickGrid example 3: 可编辑单元

    <button onclick="grid.setOptions({autoEdit:true})"> 设置自动辅助编辑下一个元素.   代码: <!DOCTYP ...

  2. SlickGrid example 3b: 支持撤销操作的编辑单元

    不同类型的属性可以按不同的风格编辑. 每个编辑单元可以设置不同的验证方法. 历史编辑可以撤销.   代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTM ...

  3. int转多进制

    char buf[4]; int len=100; _itoa(len,buf_len,16);//16代表十六进制,可用其他进制

  4. 十二 个经典 Linux 进程管理命令介绍

    执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...

  5. python 列表去重(数组)的几种方法

    一.方法1  代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids:     if id not in news_id ...

  6. VBA中自定义类和事件的(伪)注册

    想了解一下VBA中自定义类和事件,以及注册事件处理程序的方法. 折腾了大半天,觉得这样的方式实在称不上“注册”,所以加一个“伪”字.纯粹是瞎试,原理也还没有摸透.先留着,有时间再接着摸. 做以下尝试: ...

  7. zoj 1453 Surround the Trees(凸包求周长)

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=453 Time Limit: 2 Seconds      Memory ...

  8. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  9. 详解.NET异步

    在说到异步前,先来理一下几个容易混淆的概念,并行.多线程.异步. 并行,一般指并行计算,是说同一时刻有多条指令同时被执行,这些指令可能执行于同一CPU的多核上,或者多个CPU上,或者多个物理主机甚至多 ...

  10. 转 cocos2dx内存优化

    cocos2dx里面,sprite本身不消耗多少内存,只是关联的材质文件消耗内存.假设有10个sprite关联同一个材质,也不会有10倍消耗. 关于图片占用的材质内存,我觉得还有好几种优化手段:1.对 ...