D3图表大都是由SVG来实现的，所以在继续学习前需要了解一些SVG的知识，可以通过看svg教程来学习一下。
D3可以生成一般的SVG形状，它也内置了很多SVG图表，方便我们直接生成实用的图表。
我们先来创建一个SVG容器，其它SVG图形都需要在容器里来创建：
var body = d3.select('body');
var svg = body.append('svg').attr('width',200).attr('height',200);
普通SVG
用D3来生成一般的SVG图形，可以直接用 append + attr 就可以实现，例如：
线条(line)：
var line = svg.append('line').attr('x1',100).attr('y1',100).style({fill:'none',stroke:'#000'});
圆(circle)：
var circle = svg.append('circle').attr('cx',50).attr('cy',50).attr('r',50).style({fill:'#000'});
SVG生成器
D3为我们提供了更复杂的svg图形生成器，结合数据我们可以轻松绘制出复杂的SVG，例如：
折线图(d3.svg.line)：
var data = [[{x:0,y:100},{x:50,y:80},{x:100,y:150},{x:150,y:50},{x:200,y:120}]];
var line = d3.svg.line().x(function(d){return d.x}).y(function(d){return 200-d.y});
var lineChart = svg.selectAll('path').data(data);
lineChart.enter().append('path').attr('d',function(d){return line(d)}).style({fill:'none',stroke:'#000'});
面积图(d3.svg.area)：
var data = [[{x:0,y:100},{x:50,y:80},{x:100,y:150},{x:150,y:50},{x:200,y:120}]];
var area = d3.svg.area().x(function(d){return d.x}).y0(function(d){return 200}).y1(function(d){return 200-d.y});
var areaChart = svg.selectAll('path').data(data);
areaChart.enter().append('path').attr('d',function(d){return area(d)}).style({fill:'#000'});
圆弧图(d3.svg.arc)：
var angle = 2*Math.PI;
var data = [{startAngle:0,endAngle:0.2*angle},{startAngle:0.5*angle,endAngle:0.8*angle}];
var arc = d3.svg.arc().innerRadius(50).outerRadius(100);
var arcChart = svg.selectAll('path').data(data);
arcChart.enter().append('path').attr('transform','translate(100,100)').attr('d',function(d){return arc(d)}).style({fill:'#000'});
径向折线图(d3.svg.line.radial)：
var angle = 2*Math.PI;
var data = [[100,80,60,90,90,100]];
var lineRadial = d3.svg.line.radial().radius(function(d){return d}).angle(function(d,i){if(i == 5){return 0};return (i/5)*angle});
var lineRadialChart = svg.selectAll('path').data(data);
lineRadialChart.enter().append('path').attr('transform','translate(100,100)').attr('d',function(d){return lineRadial(d)}).style({fill:'none',stroke:'#000'});
径向面积图(d3.svg.area.radial)：
var angle = 2*Math.PI;
var data = [[100,80,60,90,90,100]];
var areaRadial = d3.svg.area.radial().innerRadius(function(d) { return d/2; }).outerRadius(function(d) { return d; }).angle(function(d,i){if(i == 5){return 0};return (i/5)*angle});
var areaRadialChart = svg.selectAll('path').data(data);
areaRadialChart.enter().append('path').attr('transform','translate(100,100)').attr('d',function(d){return areaRadial(d)}).style({fill:'#000'});
弦图(d3.svg.chord)：
var angle = 2*Math.PI;
var chordRadial = d3.svg.chord().radius(100).source({startAngle:0,endAngle:0.1*angle}).target({startAngle:0.4*angle,endAngle:0.8*angle});
var chordRadialChart = svg.append('path').attr('transform','translate(100,100)').attr('d',function(d){return chordRadial(d)}).style({fill:'#000'});
对角线图(d3.svg.diagonal)：
var angle = 2*Math.PI;
var diagonal = d3.svg.diagonal().source({x:10,y:30}).target({x:180,y:200});
var diagonalRadialChart = svg.append('path').attr('d',function(d){return diagonal(d)}).style({fill:'none',stroke:'#000'});
符号(d3.svg.symbol)：
var symbol = d3.svg.symbol().type(function(d,i){return type[d-1]}).size(function(d){return d*50;});
var data = [1,2,3,4,5];
var type = ['circle','cross','diamond','square','triangle-down','triangle-up'];
var symbolChart = svg.selectAll('path').data(data).enter().append('path');
symbolChart.attr('transform',function(d,i){var t = i*20+10;return 'translate('+ t +','+ t +')'}).attr('d',function(d){return symbol(d)}).style({fill:'none',stroke:'#000'});
坐标轴(d3.svg.axis)：
var axisx = d3.svg.axis().scale(d3.scale.linear().domain([0,100]).range([0,140])).ticks(5);
var axisxChart = svg.append('g').attr('transform','translate(30,170)').call(axisx).style({fill:'none','stroke-width':1,stroke:'#000','font-size':12});
var axisy = d3.svg.axis().scale(d3.scale.linear().domain([0,100]).range([140,0])).ticks(5).orient('left');
var axisyChart = svg.append('g').attr('transform','translate(30,30)').call(axisy).style({fill:'none','stroke-width':1,stroke:'#000','font-size':12});
brush(d3.svg.brush)：
svg.style('background','#eee');
var linear = d3.scale.linear().domain([0,100]).range([0,200]);
var brush = d3.svg.brush().x(linear).on('brush',function(){
console.log(brush.extent());
});
var g = svg.append('g').call(brush).selectAll('rect').attr('height',200);
点击这里查看在线效果
总结
D3制作图表的过程就是将各种SVG图形拼接在一起的过程；
相关资源：python入门教程(PDF版)
