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

作者：键盘侠时间：2026-10-30 14:19:42浏览：221

本文详解如何使用D3.js绘制折线图。内容涵盖搭建SVG框架、利用线性比例尺创建坐标轴、通过d3.svg.line生成路径数据，以及使用enter和append方法添加数据点。文章提供完整代码示例，解析关键API如d3.extent、axis.orient及数据绑定机制，帮助开发者掌握D3.js核心绘图逻辑。

D3.js折线图绘制教程

前言

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轴方向与传统数学坐标系相反，因此在映射定义域和值域时，需将对应关系反转。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的文章，敬请关注本站。

作者最新文章

免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐

2026-11-05 14:45:59

JS空字符串和纯空格转浮点数的结果是什么

2026-11-05 11:04:42

JS在线格式化缩进混乱怎么办？配置项调整技巧

2026-11-04 23:27:25

JS怎么获取秒级时间戳

2026-11-03 21:45:29

JS时间戳怎么从毫秒转换为秒

2026-11-03 20:04:14