D3.js的v5版本入门教程（第八章）

D3中没有现成的坐标轴图形，需要我们自己用其他组件拼凑而成。D3中提供了坐标轴组件，使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单

为了表绘制一个坐标轴，我们还是需要以下新的知识点

call()函数    
    定义一个坐标轴

坐标轴是有朝向的，在这里我们以向下朝向、水平方向的坐标轴为例，其他朝向的（比如向左朝向的、垂直的坐标轴）类似，这里是接着上一章来的，数据用的也是上一章的

//为坐标轴定义一个线性比例尺

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

代码说明：

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

这里需要重点说明一下

.attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")这是设置位置信息

g.append("g").call(xAxis)，这里出现了一个新的函数，这也是这一章的重点，我们知道xAxis是我们定义的一个坐标轴，其实它本身也是一个函数，所以这句话的意思是将新建的分组<g>传给xAxis()函数，用以绘制，所以这句代码等价于

xAixs (g.append("g") ) ;

为柱状图添加坐标轴

好了，我们已经知道怎样绘制一个坐标轴了，现在为第七章绘制的柱状图加上一个坐标轴，代码很简单

<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 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","blue");

//为坐标轴定义一个线性比例尺

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>

运行结果：

效果浏览：点击浏览效果

源码浏览：点击源码浏览
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80032354

D3.js的v5版本入门教程（第八章）—— 坐标轴的更多相关文章

  1. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  2. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  3. D3.js的v5版本入门教程（第十一章）——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  4. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  5. D3.js的v5版本入门教程（第七章）—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

  6. D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  7. D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  8. D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

    D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...

  9. D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...

随机推荐

  1. Java自学-类和对象 方法重载

    什么是Java 方法重载 方法的重载指的是方法名一样,但是参数类型不一样 步骤 1 : attack方法的重载 有一种英雄,叫做物理攻击英雄 ADHero 为ADHero 提供三种方法 public ...

  2. 深入理解JVM(三) -- 对象的内存布局和访问定位

    一 对象的内存布局: 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header),实例数据(Instance Data)和对齐填充(Padding). HotSpot的对 ...

  3. 【MySQL】数据库中间件Atlas

    1.介绍 Atlas 是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改 ...

  4. MySQL数据库之互联网常用架构方案

    一.数据库架构原则 高可用 高性能 一致性 扩展性 二.常见的架构方案 方案一:主备架构,只有主库提供读写服务,备库冗余作故障转移用 jdbc:mysql://vip:3306/xxdb 高可用分析: ...

  5. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  6. Mybatis 中的转义字符及常用查询

    转译符 1.特殊字符转译 < < 小于 > > 大于 & & 与 ' ’ 单引号 " " 双引号 需要注意的是分号是必不可少的. 比如 a ...

  7. zookeeper 事务日志查看

    在version下的日志是二进制文件,查看需要转换 创建/data/middleware/zookeeper-3.4.14/translog.sh 脚本 格式化命令: java -classpath ...

  8. MySQL/MariaDB数据库的MHA实现高可用实战

      MySQL/MariaDB数据库的MHA实现高可用实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL高可用常见的解决方案 1>.Multi-Master ...

  9. mybatis多数据库切换，（动态数据源）。

    项目中将一个库的某些标的某些数据保存到另一个库. 使用spring的aop编程动态切换数据源,代码如下,以备下次用到! 1.先将两个数据库连接,创建两个数据源,交于spring管理! <bean ...

  10. Mybatis容易遇到的问题

    1.MyBatis中#和$的区别? 1.使用#的原理是?占位符,而$的原理为直接字符串拼接方式 2.$方式一般使用在写数据库中的固定字段时候才会使用例如表名或者列名(select * from use ...