一、坐标轴

坐标轴在可视化图形中是很重要的一部分，很多图表的展示都需要使用坐标轴，例如：柱形图、折线图。

D3中的坐标轴：

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

矩形
圆形
椭圆
线段
折线
多边形

还有一种比较特殊的存在，也是最强的元素：

路径

所以说，在D3种是没有现成的坐标轴组件的，需要我们使用别的方式使用坐标轴。

我们可以使用类似下面的方式：

<g>
<!-- 第一个刻度 -->
<g>
<line></line>   <!-- 第一个刻度的直线 -->
<text></text>   <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line>   <!-- 第二个刻度的直线 -->
<text></text>   <!-- 第二个刻度的文字 -->
</g>
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

分组元素，是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。

如果需要手动添加这些元素就太麻烦了，为此，D3 提供了一个组件：d3.axisBottom(xScale)。它为我们完成了以上工作。

二、使用坐标轴

1.定义坐标轴

坐标轴通常需要和比例尺一起使用：

            //为坐标轴定义一个线性比例尺var xScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]);//定义一个坐标轴var xAxis = d3.axisBottom(xScale)//定义一个axis，由bottom可知，是朝下的.ticks(7);//设置刻度数目

定义坐标轴相关的函数：

d3.svgAxis()：D3 中坐标轴的组件，能够在 SVG 中生成组成坐标轴的元素。
scale()：指定比例尺。
orient()：指定刻度的朝向，bottom 表示在坐标轴的下方显示。
ticks()：指定刻度的数量。

2.添加坐标轴

上面我们定义好了坐标轴，接下来就是将其添加到画布中去。

svg.append("g").call(axis);

上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。

3.设定坐标轴的样式和位置

默认的坐标轴样式不太美观，下面提供一个常见的样式：

<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)

4.完整代码

代码：

<!DOCTYPE html>
<html><head><title>testD3_chp7_2.html</title><script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style>.axis path,.axis line {fill: none;stroke: black;shape-rendering: crispEdges;}.axis text {font-family: sans-serif;font-size: 11px;}</style></head><body><svg width="960" height="600"></svg><script>var marge = { top: 60, bottom: 60, left: 60, right: 60 }// 定义线性比例尺var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];var scaleLinear = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]);// 定义序列比例尺var index = [0, 1, 2, 3, 4];var color = ["red", "blue", "green", "yellow", "black"];var ordinal = d3.scaleOrdinal().domain(index).range(color);ordinal(0); //返回 redordinal(2); //返回 greenordinal(4); //返回 blackvar svg = d3.select("svg");var g = svg.append("g").attr("transform", "translate(" + marge.top + "," + marge.left + ")");// 设置画布的位置var rectHeight = 30;g.selectAll("rect").data(dataset).enter().append("rect").attr("x", 20).attr("y", function (d, i) {return i * rectHeight;}).attr("width", function (d) {return scaleLinear(d);}).attr("height", rectHeight - 5).attr("fill", function (d) {return ordinal(d);  // 这里使用比例尺，来为每个矩形填充颜色});//为坐标轴定义一个线性比例尺var xScale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([0, 250]);//定义一个坐标轴var xAxis = d3.axisBottom(xScale)//定义一个axis，由bottom可知，是朝下的.ticks(7);//设置刻度数目g.append("g").attr("transform", "translate(" + 20 + "," + (dataset.length * rectHeight) + ")").call(xAxis);</script></body></html>

运行结果：

时间:2019年8月18日13:35:05

-END-

D3入门教程——坐标轴相关推荐

[数据与分析可视化] D3入门教程1-d3基础知识
d3.js入门教程1-d3基础知识文章目录 d3.js入门教程1-d3基础知识 1 HTML介绍 1.1 什么是HTML? 1.2 自定义文档样式CSS 1.3 构建svg图形 2 d3绘图入门 2 ...
D3入门教程——做一个简单的图表
文章目录一.准备 1.什么是画布 1)SVG 2)Canvas 3)两者之前的区别二.开始 1.添加画布 2.绘制矩形三.完整代码一.准备 1.什么是画布 HTML 5 提供两种强有力的&qu ...
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦做一个简单的图表为了做一个简单的图表,我们还 ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素--扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有 ...
可视化工具D3.js教程入门（第十四章）—— 中国地图
可视化工具D3.js教程入门 (第十四章)-- 中国地图代码 <!DOCTYPE html> <html lang="en"><head>& ...
python自学入门教程-Python学习教程（一）自学资源分享
在我看来,基本上可以不负责任地认为,Python 可以做任何事情.无论是从入门级选手到专业级选手都在做的爬虫,还是Web 程序开发.桌面程序开发还是科学计算.图像处理,Python都可以胜任. 或许是 ...
51单片机入门教程（6）——外部中断
51单片机入门教程(6)--外部中断一.外部中断 1.1 中断 1.2 外部中断二.中断优先级一.外部中断 1.1 中断关于中断的概念在上一篇博客中已经提到了.(传送门:51单片机入门教程(5 ...

D3入门教程——坐标轴

文章目录