d3.js path路徑 - JavaShuo

轉自：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就能夠繪製出一個圓環)app

d這個屬性,包含一系列的方法與參數.所以咱們能夠把這個屬性稱做一個「微語言」svg

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

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

首先咱們能夠繪製一個三角形ui

      
          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在後)spa

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 |不能|閉合路徑。會有一條線鏈接路徑最後一個點與起點。code

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

orm

上面的這些東西你們看起來估計已經暈了。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>

的意思了呢？