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字符串。咱們先無視掉。