SVG

Scalable Vector Graphics 是一個(gè)成熟的W3C標(biāo)準(zhǔn)，被設(shè)計(jì)用來(lái)在web和移動(dòng)平臺(tái) 上展示可交互的圖形。和HTML類似，SVG也支持CSS和JavaScript。盡管可以使用 HTML展示數(shù)據(jù)，SVG才是數(shù)據(jù)可視化領(lǐng)域的事實(shí)標(biāo)準(zhǔn)。

我們?cè)谟疫叺氖纠?，?jiǎn)短回顧一下SVG的常用元素：

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

d3的選擇集支持SVG，我們可以套用HTML的那些操作方法操作SVG文檔。

path構(gòu)造器

使用path，可以畫(huà)出你能想象的任何形狀（參看→_→示例代碼的效果）。但是，如果沒(méi) 有編輯器進(jìn)行交互的繪制，要手寫(xiě)出這些數(shù)值基本是不可能的：

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

為了在自動(dòng)化的數(shù)據(jù)處理流水線中使用path元素，d3引入了構(gòu)造器/generator， 這些構(gòu)造器的功能，就是根據(jù)你給定的一些參數(shù)，生成path元素所需要的d 屬性值：

• 曲線構(gòu)造器：根據(jù)給定的關(guān)鍵點(diǎn)，返回曲線的d字符串
• 區(qū)域構(gòu)造器：根據(jù)給定的關(guān)鍵點(diǎn)，返回區(qū)域的d字符串
• 圓弧構(gòu)造器：根據(jù)給定的角度坐標(biāo)，返回圓弧片段的d字符串

→_→的代碼定義了兩個(gè)變量：group和clock，看看這兩個(gè)變量的定義，體會(huì)下構(gòu)造器的必要性！

曲線構(gòu)造器

很多數(shù)據(jù)集可以用二維坐標(biāo)系中的曲線來(lái)進(jìn)行可視化，每一個(gè)數(shù)據(jù)對(duì)應(yīng)曲線上的一個(gè)點(diǎn)：

在SVG中，可以使用path元素表征任意的曲線。為了簡(jiǎn)化d屬性的編寫(xiě)，我們可以使用svg.line()方法創(chuàng)建一個(gè)曲線構(gòu)造器對(duì)象：

1. d3.svg.line()

曲線構(gòu)造器（注意，這指的是line()返回的結(jié)果）是一個(gè)函數(shù)，它要求調(diào)用者傳入一個(gè)數(shù)組。 默認(rèn)情況下，數(shù)組的每一項(xiàng)應(yīng)當(dāng)是一個(gè)包含x、y坐標(biāo)的數(shù)組，第一個(gè)值代表x，第二個(gè)值代表y。比如：

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

提醒一下，盡管稱為line，但是這個(gè)方法實(shí)際和SVG的line元素毫無(wú)關(guān)系。

試著查看下→_→代碼中l(wèi)ine(data)返回的內(nèi)容，努力記住，line()方法返回的是一個(gè)函數(shù)！

使用x,y訪問(wèn)器

很多情況下，我們的數(shù)據(jù)模型不符合曲線構(gòu)造器的要求。比如：

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

這時(shí)可以使用構(gòu)造器的x、y訪問(wèn)器函數(shù)告訴構(gòu)造如何訪問(wèn)我們的數(shù)據(jù)：

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

構(gòu)造器會(huì)將數(shù)據(jù)集中的每一個(gè)數(shù)據(jù)傳入訪問(wèn)器函數(shù)，并使用其返回值作為 x坐標(biāo)或y坐標(biāo)：

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);

定義插值策略

我們?yōu)榍€構(gòu)造器僅僅指定了一些關(guān)鍵點(diǎn)，中間點(diǎn)的計(jì)算是曲線構(gòu)造器完成的，這個(gè) 過(guò)程就是插值。

曲線構(gòu)造器默認(rèn)的插值模式是線性插值，所以我們看到一些直線段將我們提供 的各個(gè)點(diǎn)連接起來(lái)。

使用intepolation()方法，可以告訴構(gòu)造器使用不同的插值策略：

1. line.interpolate([interpolate])

如果inerpolate參數(shù)是一個(gè)字符串，表示要求構(gòu)造器使用一個(gè)預(yù)置的插值 策略，可以是：

• linear - 線性插值
• linear-closed - 線性插值，封閉起點(diǎn)和終點(diǎn)形成多邊形
• step - 步進(jìn)插值，曲線只能沿x軸和y軸交替伸展
• step-before - 步進(jìn)插值，曲線只能沿y軸和x軸交替伸展
• step-after - 同step
• basis - B樣條插值
• basis-open - B樣條插值，起點(diǎn)終點(diǎn)不相交
• basis-closed - B樣條插值，連接起點(diǎn)終點(diǎn)形成多邊形
• bundle - 基本等效于basis，除了有額外的tension參數(shù)用于拉直樣條
• cardinal - Cardina樣條插值
• cardinal-open - Cardina樣條插值，起點(diǎn)終點(diǎn)不相交
• cardinal-closed - Cardina樣條插值，連接起點(diǎn)終點(diǎn)形成多邊形
• monotone - 立方插值，保留y方向的單調(diào)性

interpolate參數(shù)也可以是一個(gè)函數(shù)，這個(gè)函數(shù)接受傳入的數(shù)據(jù)點(diǎn)集，返回 path的d字符串。我們先無(wú)視掉。

在→_→的代碼中，將插值模式改成上面列的值，看看效果有什么不同？

區(qū)域構(gòu)造器

有些數(shù)據(jù)集適合用二維坐標(biāo)系中的曲線區(qū)域來(lái)進(jìn)行可視化，這時(shí)可認(rèn)為區(qū)域由上下兩條線 包圍組成：

在SVG中，可以使用path元素表征任意的區(qū)域。為了簡(jiǎn)化d屬性的編寫(xiě)，我們可以使用svg.area()方法創(chuàng)建一個(gè)曲線構(gòu)造器對(duì)象：

1. d3.svg.area()

區(qū)域構(gòu)造器是一個(gè)函數(shù)，它要求調(diào)用者傳入一個(gè)數(shù)組，數(shù)組的每一項(xiàng) 應(yīng)當(dāng)是一個(gè)包含x、y坐標(biāo)的數(shù)組，第一個(gè)值代表x，第二個(gè)值代表y，這代表上面 那條線上的坐標(biāo)點(diǎn)，比如：

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

第二條線和第一條線有相同的點(diǎn)數(shù)。默認(rèn)情況下，第二條線上每個(gè)數(shù)據(jù)點(diǎn)的x和 第一條線對(duì)應(yīng)點(diǎn)的x坐標(biāo)一樣，y坐標(biāo)則保持為0。

→_→的示例效果中，你看到第二條線（水平橫線）在上面，這是因?yàn)閷?duì)于SVG坐標(biāo)系， 原點(diǎn)在左上角。

數(shù)據(jù)訪問(wèn)器

區(qū)域構(gòu)造器和曲線構(gòu)造器一樣，可以使用訪問(wèn)器定制對(duì)用戶數(shù)據(jù)的讀?。?/p>

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

你注意到，由于區(qū)域由兩條線構(gòu)成，所以多出了一組x0/y0訪問(wèn)器。

我們通常使用y0訪問(wèn)器定義比較的基準(zhǔn)。

插值

和曲線構(gòu)造器一樣，也可以使用interpolate()定義區(qū)域中曲線的插值策略：

1. area.interpolate([interpolate])

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

圓弧構(gòu)造器

我們對(duì)餅圖不陌生，一個(gè)圓被分成多份，用不同的顏色表示不同的事物：

在SVG中，可以使用path元素表征圓、圓環(huán)或扇形。為了簡(jiǎn)化d屬性的編寫(xiě)，我們可以使用svg.arc()方法創(chuàng)建一個(gè)圓弧構(gòu)造器：

1. d3.svg.arc()

圓弧構(gòu)造器要求數(shù)組中的每一項(xiàng)為一個(gè)JSON對(duì)象，有以下屬性：

• startAngle - 區(qū)塊的起始角度，以弧度為單位
• endAngle - 弧度的終止角度，以弧度為單位
• innerRadius - 內(nèi)圓半徑
• outerRadius - 外圓半徑

→_→的代碼中，先創(chuàng)建了一個(gè)g元素作為后續(xù)元素的分組容器，并設(shè)置transform屬性將 這個(gè)分組移動(dòng)到適合查看的位置。

數(shù)據(jù)訪問(wèn)器

和其他構(gòu)造器一樣，圓弧構(gòu)造器也可以使用數(shù)據(jù)訪問(wèn)器定制對(duì)用戶數(shù)據(jù)的讀取，這使其 可以適應(yīng)不同的數(shù)據(jù)結(jié)構(gòu)：

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

→_→的示例將一組數(shù)據(jù)轉(zhuǎn)化為常見(jiàn)的餅圖，每個(gè)數(shù)據(jù)的大小決定了其在整個(gè)圓所占 弧度的大小。

var →_→ = http://www./course/54fd40cfe564e50d50dcf284/