代码改变世界

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

2017-03-16 11:11  蚂蚁将军  阅读(6624)  评论(0编辑  收藏  举报

曲线构造器(注意,这指的是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字符串。我们先无视掉。