之前有说到“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比例尺，这个在下节中来学习；
查看在线示例
相关资源：七夕情人节表白HTML源码(两款)
