曲线构造器(注意,这指的是line()返回的结果)是一个函数,它要求调用者传入一个数组。 默认情况下,数组的每一项应当是一个包含x、y坐标的数组,第一个值代表x,第二个值代表y。比如:
- var line = d3.svg.line();
- var d = line([[10,20],[20,30],[50,70],[100,60]]);
提醒一下,尽管称为line,但是这个方法实际和SVG的line元素毫无关系。
试着查看下→_→代码中line(data)返回的内容,努力记住,line()方法返回的是一个函数!
使用x,y访问器
很多情况下,我们的数据模型不符合曲线构造器的要求。比如:
- var data=[
- {year:1981,yield:129303},
- {year:1982,yield:901234},
- ......
- ];
这时可以使用构造器的x、y访问器函数告诉构造如何访问我们的数据:
- line.x([x_accessor])
- line.y([y_accessor])
构造器会将数据集中的每一个数据传入访问器函数,并使用其返回值作为 x坐标或y坐标:
- var line = d3.svg.line()
- .x(function(d){return d.year;})
- .y(function(d){return d.yield;});
- var d = line(data);
定义插值策略
我们为曲线构造器仅仅指定了一些关键点,中间点的计算是曲线构造器完成的,这个 过程就是插值。
曲线构造器默认的插值模式是线性插值,所以我们看到一些直线段将我们提供 的各个点连接起来。
使用intepolation()方法,可以告诉构造器使用不同的插值策略:
- line.interpolate([interpolate])
如果inerpolate参数是一个字符串,表示要求构造器使用一个预置的插值 策略,可以是:
- linear - 线性插值
- linear-closed - 线性插值,封闭起点和终点形成多边形
- step - 步进插值,曲线只能沿x轴和y轴交替伸展
- step-before - 步进插值,曲线只能沿y轴和x轴交替伸展
- step-after - 同step
- basis - B样条插值
- basis-open - B样条插值,起点终点不相交
- basis-closed - B样条插值,连接起点终点形成多边形
- bundle - 基本等效于basis,除了有额外的tension参数用于拉直样条
- cardinal - Cardina样条插值
- cardinal-open - Cardina样条插值,起点终点不相交
- cardinal-closed - Cardina样条插值,连接起点终点形成多边形
- monotone - 立方插值,保留y方向的单调性
interpolate参数也可以是一个函数,这个函数接受传入的数据点集,返回 path的d字符串。我们先无视掉。