DDR爱好者之家

D3.js实现折线图的方法详解
站长资源 2024/11/28 佚名
68 1538
DDR爱好者之家 Design By 杰米

前言

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="/UploadFiles/2021-04-02/d3.v3.min.js">


坐标轴的实现




要创建坐标轴，需要先创建比例尺。在《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的文章，请大家继续关注。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米