d3.js path路徑

轉自：http://www.d3js.cn/?p=68

svg的path標簽被稱為”可以組成任何形狀的形狀”

SVG Path可以繪制任何形狀的圖形，包括矩形，圓形，橢圓，折線，多邊形，直線，曲線等。
W3 標准對SVG 的Path定義如下
SVG路徑代表一個形狀的輪廓,可以描邊,填充,用作剪切路徑,或任何三者的結合。
W3提供了一個形象的比喻，用鋼筆和紙來表示svg的path
* 想象一個鋼筆放在一張紙上。
* 鋼筆在某點與紙接觸。
* 筆尖移動到另一處。
* 這兩個點之間的路徑可以是直線或曲線。
* 曲線可以是一個弧,一立方曲線或二次貝塞爾曲線。
這意味着我們可以使用SVG路徑做出任何類型的SVG形狀。

SVG Path的例子

SVG Path元素的形狀被一個屬性所定義:d.(這也是為什么上一篇教程通過設置d就可以繪制出一個圓環)

d這個屬性,包含一系列的方法與參數.因此我們可以把這個屬性稱作一個“微語言”

這些方法與參數其實就是告訴電腦”如何在紙上移動你的鋼筆”.

下面我們會介紹一些經典的寫法，包含moveto(設置一個起點),lineto(畫一條直線),curveto(畫一個曲線用三次貝塞爾曲線),arc(橢圓或圓弧)和closepath(閉合路徑)。

首先我們可以繪制一個三角形

              
                  1 
                
                  2 
                
                  3 
                
                  4 
                
                  5 
                
                  6 
                
                  7 
                
                     <svg width="100" height="100"> 
                
                       <path d=" M 10 25 
                
                                 L 10 75 
                
                                 L 60 75 
                
                                 L 10 25" 
                
                                 stroke="red" stroke-width="2" fill="none" /> 
                
                     </svg>

d屬性的值” M 10 25 ……”是如下的意思：(坐標x在前y在后)

M 10 25 – 把筆落下，放在10,25處
L 10 75 – 從起點10 25出發繪制一條直線到10 75處
L 60 75 – 從起點10 75出發繪制一條直線到60 75處
L 10 25 – 從起點60 75出發繪制一條直線到10 25處

注意！ (M, L)是大寫的，表示絕對位置。當使用相對位置時，要小寫。

SVG Path 微語言

到底如何去描述path呢，參考下面：

命令 | 參數 | 是否能重復 | 解釋
M ( m ) | x, y | 不能 | 把筆尖移動到新位置，但因為沒有落筆，不會“描繪圖形”。所有的path都需要以m/M開頭
L ( l ) | x, y | 能 | 從當前點畫一條直線到坐標x,y
H ( h )| x|能 |畫水平線，從當前點畫一條水平線，到橫坐標為X處
V ( v )| y |能|畫垂線，從當前點畫一條垂線，到縱坐標為Y處
C ( c ) | x1 y1 x2 y2 x y| 能 | 繪制一條曲線。起點為當前點，終點為x,y.使用(x1,y1)作為開始階段曲線的控制點，使用 (x2,y2)作為結束階段的控制點
S ( s ) | x2 y2 x y |能| 繪制一條平滑的曲線。繪制一條以當前點為起點,x,y為終點繪制一條三次方貝塞爾曲線。注意這是一個簡寫，這條曲線同樣也有兩個控制點，但此時x1 y1跟x2,y2是對稱的，可以直接寫x2y2這一個。
Q ( q ) | x1 y1 x y |能 |二次方貝塞爾曲線。繪制一條以當前點為起點,x,y為終點的二次方貝塞爾曲線。x1 y1為控制點
T ( t ) | x y| 能 |繪制二次方貝塞爾曲線的簡寫。繪制一條以當前點為起點,x,y為終點的二次方貝塞爾曲線。控制點假定為前一個命令的控制點相對於當前點的反射。如果前一個命令不存在，或者前一個命令不是二次貝塞爾曲線命令或平滑的二次貝塞爾曲線命令，則此控制點就是當前點。
A ( a ) | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 能|橢圓弧線命令在當前點與指定的終點 (x, y)之間創建一條橢圓弧線。
Z ( z ) |none |不能|閉合路徑。會有一條線連接路徑最后一個點與起點。

關於橢圓的參數，我用拉斐爾做了個簡單的demo大家可以看下就懂了 http://jsbin.com/omajal/23/edit
另外提供兩張二次貝塞爾曲線與三次貝塞爾曲線的原理圖

上面的這些東西大家看起來估計已經暈了。D3js就是為了解決這些惡心的東西才出現的，不過知其然也要知其所以然，還是希望大家了解下~

D3.js Path 的例子

D3.js 包含了很多方便的方法來創建path，在瀏覽這些方法之前，我們先看一個簡單的例子，利用d3js畫線。

通常在一條折線中，包含很多的x,y點，這些點兩兩組合就會變成折線。

比如這樣的數據

              
                  1 
                
                  2 
                
                 <code>[ { "x": 1,   "y": 5},  { "x": 20,  "y": 20}, { "x": 40,  "y": 10}, { "x": 60,  "y": 40},{ "x": 80,  "y": 5},  { "x": 100, "y": 60}]; 
                
                 </code>

這里我們需要一個函數，把這些xy點翻譯成上面講解的path“微語言”

              
                  1 
                
                  2 
                
                 <code>d3.svg.line() 
                
                 </code>

這個path數據生成器函數可以使用我們的數據來創造一條path。在使用前，我們需要告訴d3js如何去獲取數據中的x,y坐標。

因此我們創建一個函數，這個函數可以方便的去拿到數據中的x,y坐標。

              
                  1 
                
                  2 
                
                  3 
                
                  4 
                
                  5 
                
                 <code>var lineFunction = d3.svg.line() 
                
                                           .x(function(d) { return d.x; }) 
                
                                           .y(function(d) { return d.y; }) 
                
                                           .interpolate("linear"); 
                
                 </code>

上面的函數可以把data數組中的x,y數據提取出來。之后呢，通過interpolate的設置，會使用線，連接每個點。之后就會返回一條path了。
讓我們看看完整的例子

              
                  1 
                
                  2 
                
                  3 
                
                  4 
                
                  5 
                
                  6 
                
                  7 
                
                  8 
                
                  9 
                
                  10 
                
                  11 
                
                  12 
                
                  13 
                
                  14 
                
                  15 
                
                  16 
                
                  17 
                
                  18 
                
                  19 
                
                  20 
                
                  21 
                
                  22 
                
                  23 
                
                 <code>//數據 
                
                 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20}, 
                
                                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40}, 
                
                                  { "x": 80,  "y": 5},  { "x": 100, "y": 60}]; 
                
                 //線生成器 
                
                 var lineFunction = d3.svg.line() 
                
                                          .x(function(d) { return d.x; }) 
                
                                          .y(function(d) { return d.y; }) 
                
                                          .interpolate("linear"); 
                
                 //svg容器 
                
                 var svgContainer = d3.select("body").append("svg") 
                
                                                     .attr("width", 200) 
                
                                                     .attr("height", 200); 
                
                 //把path扔到容器中，並給d賦屬性 
                
                 var lineGraph = svgContainer.append("path") 
                
                                             .attr("d", lineFunction(lineData)) 
                
                                             .attr("stroke", "blue") 
                
                                             .attr("stroke-width", 2) 
                
                                             .attr("fill", "none"); 
                
                 </code>

然后我們就拿到這么一張圖：

講解一下。.attr(“d”, lineFunction(lineData)) 是一個很關鍵的語句。這里我們把數據傳給了lineFunction，返回了path的“微語言”，之后給d屬性賦值，
這里我們直接使用了.append(“path”)，因為我們只需要根據現有的數據生成一條折線。
還記得第一篇教程講解的selectAll(), .enter(), append()組合么，那是針對多組數據來做的。而上面不需要判斷有多少組數據，然后划分多少空間，放入圖形啥的。

.interpolate(“linear”)這個函數告訴d3js使用直線來連接點。
D3.js提供了11種不同的線，可以讓d3.svg.line() 函數來操縱.這里有非常多的專業名詞，我覺得翻譯還不如不翻譯。。給大家看看吧。。

linear – piecewise linear segments, as in a polyline.
step-before – alternate between vertical and horizontal segments, as in a step function.
step-after – alternate between horizontal and vertical segments, as in a step function.
basis – a B-spline, with control point duplication on the ends.
basis-open – an open B-spline; may not intersect the start or end.
basis-closed – a closed B-spline, as in a loop.
bundle – equivalent to basis, except the tension parameter is used to straighten the spline.
cardinal – a Cardinal spline, with control point duplication on the ends.
cardinal-open – an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
cardinal-closed – a closed Cardinal spline, as in a loop.
monotone – cubic interpolation that preserves monotonicity in y.

d3.svg.line()這類path生成器，既是一個函數也是一個對象，這意味着你可以把他作為方法來生成path，也可以用一些額外方法去改變它自身的屬性。
並且他也是支持鏈式調用的
類似d3.svg.line()這樣的path生成器還有很多。比如

d3.svg.line – 線path生成器
d3.svg.line.radial – 徑向path
d3.svg.area – 區域path
d3.svg.area.radial – 徑向區域path
d3.svg.arc -圓與圓弧path
d3.svg.symbol – 符號path
d3.svg.chord -chord path，也是我們這一系列教程要用到的東西！
d3.svg.diagonal – diagonal path
d3.svg.diagonal.radial – diagonal radial path

這些生成器在d3js驅動下都擁有讀取跟寫入的方法，因此可以非常方便的生成各種path。

看完了，你是否明白

              
                  1 
                
                  2 
                
                  3 
                
                  4 
                
                  5 
                
                  6 
                
                  7 
                
                 <code>svg.append("g").selectAll("path") 
                
                         .data(chord.groups) 
                
                         .enter().append("path") 
                
                         .style("fill", function(d) { return fill[d.index] }) 
                
                         .style("stroke", function(d) { return fill[d.index]; }) 
                
                         .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) 
                
                 </code>

的意思了呢？