d3.svg.line() 曲线构造器

曲线构造器（注意，这指的是line()返回的结果）是一个函数，它要求调用者传入一个数组。 默认情况下，数组的每一项应当是一个包含x、y坐标的数组，第一个值代表x，第二个值代表y。比如：

1. var line = d3.svg.line();
2. var d = line([[10,20],[20,30],[50,70],[100,60]]);

提醒一下，尽管称为line，但是这个方法实际和SVG的line元素毫无关系。

试着查看下→_→代码中line(data)返回的内容，努力记住，line()方法返回的是一个函数！

使用x,y访问器

很多情况下，我们的数据模型不符合曲线构造器的要求。比如：

1. var data=[
2. {year:1981,yield:129303},
3. {year:1982,yield:901234},
4. ......
5. ];

这时可以使用构造器的x、y访问器函数告诉构造如何访问我们的数据：

1. line.x([x_accessor])
2. line.y([y_accessor])

构造器会将数据集中的每一个数据传入访问器函数，并使用其返回值作为 x坐标或y坐标：

1. var line = d3.svg.line()
2. .x(function(d){return d.year;})
3. .y(function(d){return d.yield;});
4. var d = line(data);

定义插值策略

我们为曲线构造器仅仅指定了一些关键点，中间点的计算是曲线构造器完成的，这个 过程就是插值。

曲线构造器默认的插值模式是线性插值，所以我们看到一些直线段将我们提供 的各个点连接起来。

使用intepolation()方法，可以告诉构造器使用不同的插值策略：

1. 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字符串。我们先无视掉。

转载于:https://www.cnblogs.com/0769fe/p/6558436.html