本章使用路径生成器来绘制一个折线图。以中国和日本的GDP数据为例：
1 //数据
2 var dataList = [ 3 { 4 coountry : "china", 5 gdp : [ 6 [2000,11920],[2001,13170],[2002,14550],[2003,16500],[2004,19440],[2005,22870], 7 [2006,27930],[2007,35040],[2008,45470],[2009,51050],[2010,59490],[2011,73140], 8 [2012,83860],[2013,103550] 9 ] 10 }, 11 { 12 coountry : "japan", 13 gdp : [ 14 [2000,47310],[2001,41590],[2002,39800],[2003,43020],[2004,46500],[2005,45710], 15 [2006,43560],[2007,43560],[2008,48490],[2009,50350],[2010,54950],[2011,59050], 16 [2012,59370],[2013,48980] 17 ] 18 } 19 ]
dataList是一个数组，每一项是一个对象，对象里有两个成员，国家名称country和国民生产总值GDP。GDP也是一个数组，其中[2000,11920]表示2000年的GDP为11920亿美元。
首先，定义x轴和y轴的比例尺，x轴表示年份，y轴表示GDP值。定义比例尺之前，要明确绘制区域和GDP的最大值:
1 //外边框
2 var padding = {top : 50 , right : 50 , bottom : 100 , left : 200}; 3
4 //计算GDP的最大值
5 var gdpmax = 0; 6 for (var i = 0; i < dataList.length ; i++){ 7 var currGdp = d3.max(dataList[i].gdp,function(d){ 8 return d[1] 9 }) 10 if(currGdp > gdpmax){ 11 gdpmax = currGdp 12 } 13 }
padding是到SVG画板上下左右各边界的距离，单位为像素。GDP的最大值保存在gdpmax变量中。使用d3.max()可以很方便的求数组中的最大值。接下来，凭借padding和gdpmax定义比例尺的定义域和值域:
1 //定义比例尺,均为线性比例尺
2 var xScale = d3.scale.linear() //定义一个比例尺
3 .domain([min,max]) //设定x轴的值域
4 .range([0,width-padding.left - padding.right]) //设定x轴的定义域
5
6 var yScale = d3.scale.linear() //定义一个比例尺
7 .domain([0,gdpmax*1.1]) //设定y轴的值域
8 .range([height-padding.top-padding.bottom,0]) //设定y轴的定义域
x轴的定义域是2000~2013，此外为了代码简洁手动指定了，实际应用时应从数据中获取。y轴的定义域是0~gdpmax*1.1,乘以1.1是为了使得图形不在坐标轴的边界绘制。接下来根据数据定义一个线段生成器:
1 //创建一个线段生成器
2 var linePath = d3.svg.line() //创建一个线段生成器
3
4 .x(function(d){return xScale(d[0])}) //设置x坐标的访问器
5 .y(function(d){return yScale(d[1])}) //设置y坐标的访问器
该直线生成器的访问器x为xScale(d[0]),y为yScale(d[1])。接下来要传入的数据是gdp数组，如d为[2000,11920]这样的值:那么d[0]就是年份，d[1]是国民生产总值。对这两个值都使用比例尺变换，则输入的数据会自动按照比例伸缩后再生成直线路径。
定义两个RGB颜色，分别用于两条折现的着色。然后，添加与数组dataList长度相同数量的<path>元素，并设置为线段生成器计算的路径。代码:
1 //定义两个颜色
2 var colors = [d3.rgb(0,0,255),d3.rgb(0,255,0)] 3
4 //添加路径
5 svg.selectAll("path") //选择svg中所有的path
6 .data(dataList) //绑定数据
7 .enter() //获取enter部分
8 .append("path") //添加足够数量的<path>元素
9 .attr("transform","translate("+padding.left + "," + padding.top + ")") //平移
10 .attr("d",function(d){ 11 return linePath(d.gdp) //返回线段生成器得到的路径
12 }) 13 .attr("fill","none") //填充色为none
14 .attr("stroke",function(d,i){ 15 return colors[i] //设置折线颜色
16 }) 17 .attr("stroke-width","3px") //设置折线的宽度
添加元素的形式"selectAll().data().enter().append()"，相信大家都已经很熟悉了。给属性transform赋予适当的值，令折线平移到指定的位置。在<path>元素的d属性中，使用线段生成器计算路径，注意linePath()的参数是d.gdp。此处的线段生成器是按照数组gdp的格式来设定访问器的，因此一定要以d.gdp，而不是以d作为参数。
接下来绘制坐标轴:
1 //坐标轴x轴
2 var xAxis = d3.svg.axis() //创建一个新坐标轴
3 .scale(xScale) //设定x坐标轴的比例尺
4 .ticks(6) //设定x坐标轴的分隔数
5 .tickFormat(d3.format("d")) //刻度的数组用字符串表示
6 .orient("bottom") //设定x坐标轴的方向
7 //坐标轴y轴
8 var yAxis = d3.svg.axis() //创建一个新坐标
9 .scale(yScale) //设定y坐标轴的比例尺
10 .or