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

之前有说到“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);
        });

总结

在这个示例中完整的展现了一个D3图表是怎么将数据与图形做绑定，以及如何将不同的SVG组合成一个完整的图表，还用到了目前为止没讲过的D3比例尺，这个在下节中来学习；

查看在线示例