1var area = d3.svg.area().interpolate("monotone").x(function(d) { return x(d.date); }).y0(260).y1(function(d) { return y(d.price); }); 2 //.x()数据点在x轴的坐标d.date 3 //.y1数据点在y轴的坐标d.price,这两个值确定一个数据点的坐标(数值) 4 //.y0相当于转换器[0,260],把y1的值映射到[0-260](像素)显示出来 5 //area函数的作用就是把这些孤立的点画成一个闭合区域，生成一个path 6 //interpolate("monotone")这里使用贝塞尔曲线画区域故用插值法 7数据： 8date,price 9Jan 2000,300 10Apr 2000,400 11Jul 2000,500 12 13生成path(数据对应第二个path,小数点已删掉): 14M 0,260 移动到左下角（0，260），260是总高度 15C 70,239,314,170,455,130 从起点（2,260）画曲线到455,130 16S 839,20,910,0 从上点（455,130）画曲线到910,0 17L 910,260 画直线到910,260 18C 834,260,606,260,455,260 从上点（910,260）画曲线到455,260 19S 75,260,0,260Z 从上点（455,260）画曲线到0,260 闭合路径（已经重合） 20 21下面点与上面基本一致，只是起点不是左下角，闭合时起点与终点还未重合 22M 0,156 23C 731,143,307,103,455,77 24S 836,12,910,0 25L910,260 26C 834,260,606,260,455,260 27S75,260,0,260 28Z 29 30命令： 31M 移动到（moveTo） x,y 开始点坐标 32Z 闭合路径（closepath） 将路径的开始和结束点用直线连接 33L 直线（lineTo） x,y 当前节点到指定(x,y)节点，直线连接 34H 水平直线 x 保持当前点的y坐标不变，x轴移动到x，形成水平线 35V 垂直直线 y 保持当前点的x坐标不变，y轴移动到y，形成垂直线 36C x1 y1, x2 y2, x y 画笔从【当前的点X0,Y0】绘制一段三次贝塞尔曲线到点(x,y) 37S x2 y2, x y 特殊版本的三次贝塞尔曲线(省略第一个控制点)