D3.js实现折线图的方法详解
2017-05-19 16:28
183 查看
http://www.jb51.net/article/93088.htm
众所周知图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
前言
D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧。
折线图由坐标轴、线条和点组成。和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js):
?
坐标轴的实现
要创建坐标轴,需要先创建比例尺。在《D3.js实现柱状图的方法详解》中提到过序数比例尺和线性比例尺,因为折线的点与点之间是存在连续的关系的,所以折线图的x轴和y轴我们都采用线性比例尺。
?
这次我们模拟了一些点的数据来进行折线的绘制。
折线的实现
在D3.js中,需要先创建一个线的函数,然后由该函数得出的值赋给代表折线的path元素的d属性,才能绘制出折线。需要明确,line是一个函数,不是一个对象。
具体的代码如下:
?
这样做了以后,我们得到了如下图所示的一条线。
点的实现
点其实就是一个个的圆,所以在这里我们用SVG里的circle元素来画点。
?
在main元素中选择到所有的圆先“占位”(因为此时选择到的是一个空的集合,只是这个集合代表main中所有的圆),然后绑定dataset到此集合上,通过
总结
以上就是利用D3.js实现折线图的全部内容,希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流,小编还会陆续更新关于D3.js的文章,请大家继续关注脚本之家。
众所周知图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。现在就让我们大家一起来学习用D3.js来实现折线图。
前言
D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧。
折线图由坐标轴、线条和点组成。和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js):
?
要创建坐标轴,需要先创建比例尺。在《D3.js实现柱状图的方法详解》中提到过序数比例尺和线性比例尺,因为折线的点与点之间是存在连续的关系的,所以折线图的x轴和y轴我们都采用线性比例尺。
?
d3.scale.linear()创建了线性比例尺,
linear.domain()定义定义域,
linear.range()定义值域。这里需要注意一下,因为SVG画布的y轴与传统认知上的y轴的方向是反着来的,所以在定义y轴的定义域和值域对应关系时,也需要反着来。
d3.extent可以得到参数数组中的最大值和最小值,并以数组的形式返回。然后用
d3.svg.axis()创建了两个坐标轴,把比例尺应用到它们上面,并且用
axis.orient()设置了坐标轴的刻度尺的方向。最后,添加SVG元素,用
call()把定义好的坐标轴与SVG元素联系起来。通过设置它们的transform属性来移动元素,使它们看起来像是一个坐标系。
折线的实现
在D3.js中,需要先创建一个线的函数,然后由该函数得出的值赋给代表折线的path元素的d属性,才能绘制出折线。需要明确,line是一个函数,不是一个对象。
具体的代码如下:
?
点的实现
点其实就是一个个的圆,所以在这里我们用SVG里的circle元素来画点。
?
enter()和
append()搭配使用添加新的circle元素直到集合元素个数与dataset子元素个数相同为止。用比例尺计算出各圆的坐标并对其相关属性进行赋值,就完成了点的添加。
总结
以上就是利用D3.js实现折线图的全部内容,希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流,小编还会陆续更新关于D3.js的文章,请大家继续关注脚本之家。
相关文章推荐
- D3.js实现柱状图的方法详解
- D3.js实现雷达图的方法详解
- D3.js实现折线图的方法详解
- 详解两种C#自动实现DLL(OCX)控件注册的方法
- redis实现加锁的几种方法示例详解
- C# 实现多线程的同步方法详解
- DateDiff 函数详解,DateDiff 方法在C#中的实现
- C++反射机制具体实现方法详解(转帖:原作者不详)
- 详解网络数字电视的实现方法与关键技术
- 详解Oracle用户解锁命令的两则实现方法
- 在.Net框架中 C# 实现多线程的同步方法详解
- NAT端口映射配图详解-外网访问代理服务器内部的实现方法
- 详解Oracle用户解锁命令的两则实现方法
- C#创建文件夹实现方法详解
- 详解两种C#自动实现DLL(OCX)控件注册的方法
- 转C# 实现多线程的同步方法详解
- ·详解两种C#自动实现DLL(OCX)控件注册的方法
- 实现定时开关机两种方法及shutdown命令详解
- 详解堆栈的几种实现方法——C语言版
- Tip:invoke方法详解 及实现循环的源代码