一、引入文件：
<script src="//d3js.org/d3.v3.min.js"></script>
二、创建容器：
1 var margin = {top: 20, right: 20, bottom: 30, left: 50}, 2 width = 590 - margin.left - margin.right, 3 height = 300 - margin.top - margin.bottom; 4 5 var svg = d3.select("body").append("svg") 6 .attr("width", width + margin.left + margin.right) 7 .attr("height", height + margin.top + margin.bottom) 8 .append("g") 9 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
需要注意的几个尺寸：svg画布的尺寸、chart图片的尺寸、margin值，另外svg的坐标原点是左上角，向右为正，向下为正。这对之后的各种元素的transition很重要。
三、绘制X轴与Y轴：
1 var parseDate = d3.time.format("%Y-%m-%d").parse; 2 var x = d3.time.scale() 3 .range([0, width]); 4 5 var y = d3.scale.linear() 6 .range([height, 0]); 7 8 var xAxis = d3.svg.axis() 9 .scale(x) 10 .orient("bottom") 11 .tickFormat(d3.time.format("%m.%d")); 12 13 var yAxis = d3.svg.axis() 14 .scale(y) 15 .orient("left"); 16
1、parseDate是个函数，类似于公式。 d3.time.format("%Y-%m-%d").parse 的作用是将"%Y-%m-%d"格式的字符串转成真正的日期对象（Date）。
2、规定xy轴的比例尺：d3.time.scale() 表示时间比例尺，d3.scale.linear()表示线性比例尺，domain(输入)和range(输出)分别定义比例尺的定义域和值域。
3、定义坐标轴：d3.svg.axis()生成坐标轴，.scale()表示坐标轴应用的比例尺，orient表示方位，tickFormat(d3.time.format("%m.%d"))表示刻度格式化，也就是输出日期格式为12.14的刻度；
4、绘制线条：d3.svg.line()表示生成线条，
延伸学习：
D3.js入门教程：http://www.ourd3js.com/wordpress/
D3.js中文手册：https://github.com/mbostock/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
日期拆线图实例：http://bl.ocks.org/mbostock/3883245
D3.js应用实例：http://ju.outofmemory.cn/entry/60346
功能强大的D3拆线图：http://www.bjmagicdata.com/d3/demo7_1.html
原文：http://www.cnblogs.com/newh5/p/4943071.html