【D3.js 学习总结】5、D3 SVG图表示例

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_34055787

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量268

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/69027

本文详细介绍使用D3.js绘制面积图表的过程，包括创建SVG容器、设置数据比例尺、生成坐标轴及折线和面积图等步骤，并通过具体示例展示了如何实现数据与图形的绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前有说到“D3制作图表的过程就是将各种SVG图形拼接在一起的过程”，具体来说折线图表就是折线图+坐标轴的组合，面积图是折线图+坐标轴+面积图

一个完整的SVG图表，是包含了各种数据、SVG图形、样式、交互组成的组合体，我们以面积图表来做一个示例展示：

CSS

  svg{
    font-size: 12px;
  }
  .line{
    fill:none;
    stroke-width:1;
    stroke:#000;
  }
  .axis line{
    stroke: #000;
    stroke-width: 1;
  }
  .axis .domain{
    fill:none;
    stroke-width:1;
    stroke:#000;
  }
  .area{
    fill: #eee;
  }

JAVASCRIPT

数据

    var _data = [
      [
        {"x":0,"y":4},
        {"x":1,"y":4},
        {"x":2,"y":6},
        {"x":3,"y":0},
        {"x":4,"y":7},
        {"x":5,"y":6},
        {"x":6,"y":1},
        {"x":7,"y":1},
        {"x":8,"y":7},
        {"x":9,"y":5},
        {"x":10,"y":3}
      ]
    ]

创建SVG容器

    var _width = 600;
    var _height = 300;
    var _margin = {top:30,right:30,bottom:30,left:30};
    var _xStart = _margin.left;
    var _xEnd = _width - _margin.right;
    var _yStart = _height - _margin.bottom;
    var _yEnd = _margin.top;

    var _svg = d3.select('body').append('svg')
        .attr('width',_width)
        .attr('height',_height);
    var _bodyG = _svg.append('g')
        .attr('transform','translate('+ _xStart +','+ _yEnd +')');

设置数据比例尺

    var _quadrantWidth = _width - _margin.left - _margin.right;
    var _quadrantHeight = _height - _margin.top - _margin.bottom;
    var _x = d3.scale.linear().domain([0,10]).range([0,_quadrantWidth])
    var _y = d3.scale.linear().domain([0,10]).range([_quadrantHeight,0])

生成X轴SVG图

    var _xAxis = d3.svg.axis()
        .scale(_x)
        .orient('bottom');

    _svg.append('g')
        .classed('x axis',true)
        .attr('transform', 'translate('+ _xStart +', '+ _yStart +')')
        .call(_xAxis);

生成Y轴SVG图

    var _yAxis = d3.svg.axis()
        .scale(_y)
        .orient('left');

    _svg.append('g')
          .classed('y axis',true)
          .attr('transform','translate('+ _xStart +','+ _yEnd +')')
          .call(_yAxis);

生成折线SVG图

    var _line = d3.svg.line()
        .x(function(d){return _x(d.x)})
        .y(function(d){return _y(d.y)});
    var _linePath = _bodyG.selectAll('.line').data(_data);

    _linePath
        .enter()
        .append('path')
        .classed('line',true);

    _linePath
        .attr('d', function(d){
          return _line(d);
        });

生成面积SVG图

    var _area = d3.svg.area()
        .x(function(d){
          return _x(d.x);
        })
        .y0(function(d){
          return _quadrantHeight;
        })
        .y1(function(d){
          return _y(d.y);
        })
    var _areaPath = _bodyG.selectAll('.area').data(_data);

    _areaPath
        .enter()
        .append('path')
        .classed('area',true);

    _areaPath
        .attr('d', function(d){
          return _area(d);
        });