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