d3.js 之SVG：矢量化圖形繪製

Scalable Vector Graphics 是一個成熟的W3C標準，被設計用來在web和移動平臺 上展現可交互的圖形。和HTML相似，SVG也支持CSS和JavaScript。儘管可使用 HTML展現數據，SVG纔是數據可視化領域的事實標準。

咱們在右邊的示例中，簡短回顧一下SVG的經常使用元素：

• SVG文檔：svg
• 分組：g
• 矩形：rect
• 圓形：circle
• 橢圓：ellipse
• 折線：polyline
• 多邊形：polygon
• 文字：text
• 路徑：path

d3的選擇集支持SVG，咱們能夠套用HTML的那些操做方法操做SVG文檔。

path構造器

使用path，能夠畫出你能想象的任何形狀（參看→_→示例代碼的效果）。可是，若是沒 有編輯器進行交互的繪製，要手寫出這些數值基本是不可能的：

1. <svg>
2. <!--可使用path元素畫任意圖形-->
3. <path d="..."></path>
4. </svg>

爲了在自動化的數據處理流水線中使用path元素，d3引入了構造器/generator， 這些構造器的功能，就是根據你給定的一些參數，生成path元素所須要的d 屬性值：

• 曲線構造器：根據給定的關鍵點，返回曲線的d字符串
• 區域構造器：根據給定的關鍵點，返回區域的d字符串
• 圓弧構造器：根據給定的角度座標，返回圓弧片斷的d字符串

→_→的代碼定義了兩個變量：group和clock，看看這兩個變量的定義，體會下構造器的必要性！

曲線構造器

不少數據集能夠用二維座標系中的曲線來進行可視化，每個數據對應曲線上的一個點：

在SVG中，可使用path元素表徵任意的曲線。爲了簡化d屬性的編寫，咱們可使用svg.line()方法建立一個曲線構造器對象：

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

在→_→的代碼中，將插值模式改爲上面列的值，看看效果有什麼不一樣？

區域構造器

有些數據集適合用二維座標系中的曲線區域來進行可視化，這時可認爲區域由上下兩條線 包圍組成：

在SVG中，可使用path元素表徵任意的區域。爲了簡化d屬性的編寫，咱們可使用svg.area()方法建立一個曲線構造器對象：

1. d3.svg.area()

區域構造器是一個函數，它要求調用者傳入一個數組，數組的每一項 應當是一個包含x、y座標的數組，第一個值表明x，第二個值表明y，這表明上面 那條線上的座標點，好比：

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

第二條線和第一條線有相同的點數。默認狀況下，第二條線上每一個數據點的x和 第一條線對應點的x座標同樣，y座標則保持爲0。

→_→的示例效果中，你看到第二條線（水平橫線）在上面，這是由於對於SVG座標系， 原點在左上角。

數據訪問器

區域構造器和曲線構造器同樣，可使用訪問器定製對用戶數據的讀取：

1. area.x([x_accessor]);
2. area.y([y_accessor]);
3. area.x0([x_accessor]);
4. area.y0([y_accessor]);

你注意到，因爲區域由兩條線構成，因此多出了一組x0/y0訪問器。

咱們一般使用y0訪問器定義比較的基準。

插值

和曲線構造器同樣，也可使用interpolate()定義區域中曲線的插值策略：

1. area.interpolate([interpolate])

在→_→的示例代碼中，改變下y0的值，看看有什麼不一樣？

圓弧構造器

咱們對餅圖不陌生，一個圓被分紅多份，用不一樣的顏色表示不一樣的事物：

在SVG中，可使用path元素表徵圓、圓環或扇形。爲了簡化d屬性的編寫，咱們可使用svg.arc()方法建立一個圓弧構造器：

1. d3.svg.arc()

圓弧構造器要求數組中的每一項爲一個JSON對象，有如下屬性：

• startAngle - 區塊的起始角度，以弧度爲單位
• endAngle - 弧度的終止角度，以弧度爲單位
• innerRadius - 內圓半徑
• outerRadius - 外圓半徑

→_→的代碼中，先建立了一個g元素做爲後續元素的分組容器，並設置transform屬性將 這個分組移動到適合查看的位置。

數據訪問器

和其餘構造器同樣，圓弧構造器也可使用數據訪問器定製對用戶數據的讀取，這使其 能夠適應不一樣的數據結構：

1. area.startAngle([sa_accessor]);
2. area.endAngle([ea_accessor]);
3. area.innerRadius([ir_accessor]);
4. area.outerRadius([or_accessor]);

→_→的示例將一組數據轉化爲常見的餅圖，每一個數據的大小決定了其在整個圓所佔 弧度的大小。

var →_→ = http://***/course/54fd40cfe564e50d50dcf284/