D3.js实现折线图的方法详解


Posted in Javascript onSeptember 21, 2016

前言

D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧。

折线图由坐标轴、线条和点组成。和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <style>
      .container {
        margin: 30px auto;
        width: 600px;
        height: 300px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <svg width="100%" height="100%"></svg>
    </div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      window.onload = function() {
        var width = 600, height = 300;
        // SVG画布边缘与图表内容的距离
        var padding = { top: 50, right: 50, bottom: 50, left: 50 };
        // 创建一个分组用来组合要画的图表元素
        var main = d3.select('.container svg').append('g')
          // 给这个分组加上main类
          .classed('main')
          // 设置该分组的transform属性
          .attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
      };
    </script>
  </body>
</html>

坐标轴的实现

要创建坐标轴,需要先创建比例尺。在《D3.js实现柱状图的方法详解》中提到过序数比例尺和线性比例尺,因为折线的点与点之间是存在连续的关系的,所以折线图的x轴和y轴我们都采用线性比例尺。

// 模拟数据
var dataset = [
  {x: 0, y: 11}, {x: 1, y: 35},
  {x: 2, y: 23}, {x: 3, y: 78},
  {x: 4, y: 55}, {x: 5, y: 18},
  {x: 6, y: 98}, {x: 7, y: 100},
  {x: 8, y: 22}, {x: 9, y: 65}
];
// 创建x轴的比例尺(线性比例尺)
var xScale = d3.scale.linear()
    .domain(d3.extent(dataset, function(d) {
      return d.x;
    }))
    .range([0, width - padding.left - padding.right]);
// 创建y轴的比例尺(线性比例尺)
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset,function(d) {
      return d.y;
    })])
    .range([height - padding.top - padding.bottom, 0]);
// 创建x轴
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom');
// 创建y轴
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left');
// 添加SVG元素并与x轴进行“绑定”
main.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
    .call(xAxis);
// 添加SVG元素并与y轴进行“绑定”
main.append('g')
    .attr('class', 'axis')
    .call(yAxis);

这次我们模拟了一些点的数据来进行折线的绘制。d3.scale.linear()创建了线性比例尺,linear.domain()定义定义域,linear.range()定义值域。这里需要注意一下,因为SVG画布的y轴与传统认知上的y轴的方向是反着来的,所以在定义y轴的定义域和值域对应关系时,也需要反着来。d3.extent可以得到参数数组中的最大值和最小值,并以数组的形式返回。然后用d3.svg.axis()创建了两个坐标轴,把比例尺应用到它们上面,并且用axis.orient()设置了坐标轴的刻度尺的方向。最后,添加SVG元素,用call()把定义好的坐标轴与SVG元素联系起来。通过设置它们的transform属性来移动元素,使它们看起来像是一个坐标系。

D3.js实现折线图的方法详解

折线的实现

在D3.js中,需要先创建一个线的函数,然后由该函数得出的值赋给代表折线的path元素的d属性,才能绘制出折线。需要明确,line是一个函数,不是一个对象。

具体的代码如下:

// 添加折线
var line = d3.svg.line()
    .x(function(d) {
      return xScale(d.x)
    })
    .y(function(d) {
      return yScale(d.y);
    })
    // 选择线条的类型
    .interpolate('linear');
// 添加path元素,并通过line()计算出值来赋值
main.append('path')
    .attr('class', 'line')
    .attr('d', line(dataset));

这样做了以后,我们得到了如下图所示的一条线。

D3.js实现折线图的方法详解

点的实现

点其实就是一个个的圆,所以在这里我们用SVG里的circle元素来画点。

// 添加点
main.selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('cx', function(d) {
      return xScale(d.x);
    })
    .attr('cy', function(d) {
      return yScale(d.y);
    })
    .attr('r', 5)
    .attr('fill', function(d, i) {
      return getColor(i);
    });

在main元素中选择到所有的圆先“占位”(因为此时选择到的是一个空的集合,只是这个集合代表main中所有的圆),然后绑定dataset到此集合上,通过enter()append()搭配使用添加新的circle元素直到集合元素个数与dataset子元素个数相同为止。用比例尺计算出各圆的坐标并对其相关属性进行赋值,就完成了点的添加。

D3.js实现折线图的方法详解

总结

以上就是利用D3.js实现折线图的全部内容,希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流,小编还会陆续更新关于D3.js的文章,请大家继续关注三水点靠木。

Javascript 相关文章推荐
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 #Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 #Javascript
D3.js实现柱状图的方法详解
Sep 21 #Javascript
AngularJS ng-style中使用filter
Sep 21 #Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
You might like
星际争霸中的热键
2020/03/04 星际争霸
各种战术和打法的原创者
2020/03/04 星际争霸
十天学会php之第八天
2006/10/09 PHP
提取HTML标签
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP扩展开发入门教程
2015/02/26 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python中requests小技巧
2017/05/10 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技