因為需要所以開始了，D3.js的學習之路。
在開始學的時候，發現的學習D3.js需要有一些SVG和canvas的知識，這些是我之前都沒有接觸過的，所以現在從svg開始學習了。
SVG可縮放矢量圖，使用XML格式SVG文件必須使用.svg后綴來保存。先來一個例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
SVG 代碼解析：
第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是否是"獨立的"，或含有對外部文件的引用。
standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這里，是 DTD 文件。
第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。該 DTD 位於 W3C，含有所有允許的 SVG 元素。
SVG 代碼以 <svg> 元素開始，包括開啟標簽 <svg> 和關閉標簽 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。
SVG 的 <circle> 用來創建一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那么圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。
stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。
fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。
關閉標簽的作用是關閉 SVG 元素和文檔本身。
注釋：所有的開啟標簽必須有關閉標簽！
SVG中預定義了七種形狀元素：
分別為：矩形<rect>、圓形<circle>、橢圓形<ellipse>、線段<line>、折線<polyline>、多邊線<polygon>、路徑<path>。
一、矩形<rect>
六個參數：
x：矩形左上角的x坐標； y：矩形左上角的y坐標；
width：矩形的寬度；height：矩形的高度；
rx：對於圓角矩形，指定橢圓在x方向的半徑；ry：對於圓角矩形，指定橢圓在y方向的半徑。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="40" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
建議在菜鳥教程中實例操作一下，可以加深印象(自己修改參數的值，看效果)。
二、圓形<circle>
三個參數：
cx：圓心的x坐標；cy：圓心的y坐標；r：圓的半徑。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
菜鳥教程實例操作
三、橢圓<ellipse>
四個參數：
cx：圓心的x坐標； cy：圓心的y坐標；
rx：橢圓的水平半徑；ry：橢圓的垂直半徑。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
菜鳥教程實例操作。
四、線段<line>
四個參數：
x1：起點的x坐標；y1：起點的y坐標；
x2：終點的x坐標；y2：終點的y坐標；
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> //實例
五、折線<polyline>
屬性points："x,y x1,y1 x2,y2";(x,y是坐標，x1,y1是下一個坐標)每一組都用空格分隔。
<ployline points="100,20 20,90 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:3" transform="translate(200,0)" />
六、多邊形<polygon>
多邊形就是折線的最起始和最后的點連接，得到的圖形。
<polygon points="100,20 20,90 60,160 140,160 180,90" style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>
七、路徑<path>
M=moveto：將筆畫移動到指定坐標。
L=lineto：畫直線到指定坐標。
H=horizontal lineto：畫水平直線到指定坐標。
V=vertical lineto：畫垂直直線到指定坐標。
C=curveto：畫三次貝塞爾曲線經兩個指定控制點到達終點坐標。
S=shorthand/smooth curveto：與前一條三次貝賽爾曲線相連，第一個控制點前一條曲線第二個控制點的對稱點，只需輸入第二個控制點和終點，即可繪制一個三次貝賽爾曲線。
Q=quadratic Bezier curveto：畫二次貝賽爾曲線一個指定控制點到達終點坐標。
T=Shortand/smooth quadratic Bezier curveto：與前一條二次貝賽爾曲線相連，第一個控制點前一條曲線第二個控制點的對稱點，只需輸入第二個控制點和終點，即可繪制一個二次貝賽爾曲線。
A=elliptical arc：畫橢圓曲線到指定坐標。
Z=closepath：繪制一條直線連接終點和起點，用來封閉圖形。
上述命令都是用大寫英文字母，表示坐標系中的絕對坐標(absolute)。也可以用小寫英文字母，表示相對坐標(相對當前筆畫所在點)。
弧線：A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
rx：橢圓x方向半軸大小；ry：橢圓y方向半軸大小；x-axis-rotation：橢圓形的x軸與水平軸順時針方向的夾角；large-arc-flag：有兩個值(1:大角度弧線,0:小角度弧線)；sweep-flag：有兩個值(1:順時針至終點,0:逆時針至終點)；x：終點x坐標；y：終點y坐標。
八、文本<text>
六個參數：
x：文本位置的x坐標；y：文字位置的y坐標；
dx：相對於當前位置在x方向上平移的距離(值為正則往右，負則往左)。
dy：相當於當前位置在y方向上平移的距離(值為正則往下，負則往上)。
textLength：文字的顯示長度(不足則拉長，足則壓縮)。
totate：旋轉角度(順時針為正，逆時針為負)。
如果對多個文字中的部分文字單獨定義樣式可以用<tspan>標簽。
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I am <tspan fill="yellow">programmer</tspan>
</text>
SVG樣式：
fill：填充色，改變文字<text>的顏色也用它。
stroke：輪廓線的顏色。
stroke-width：輪廓線的寬度。
stroke-linecap：線頭端點的樣式，圓角，直角等。
stroke-dashanray：虛線的樣式。(實例) 第一個是虛線長度，第二個是間隔空白長度......
opacity：透明度，0.0為完全透明，1.0完全不透明。
font-family：字體。
font-size：字體大小。
font-weight：字體粗細。
font-style：字體的樣式，斜體等。
text-decoration：上畫線、下划線等。
SVG標記<marker>：
標記(marker)，也就是給線段添加箭頭。marker定義一組標記，defs定義可重復利用的圖形。
marker的一些屬性：
viewBox：坐標系的區域
refX,refY：在viewBox內的基准點，繪制時此點在直線端點上。
markerWidth,markerHeight：標識的大小。
orient：繪制方向，可設定為auto(自動確認方向)和角度值。
id：標識的id號。
給線段添加箭頭，首先先定義一個箭頭，在調用這個箭頭。
<defs> <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refsX="6" refsY="6" orient="auto"> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000" /> </marker> </defs>
這是一條帶箭頭的曲線：
<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" />
marker-start：路徑起點處。
marker-mid：路徑中間端點處。(箭頭將繪制在路徑的節點處，so對直線無效)
marker-end：路徑終點處。
SVG濾鏡<filter>：
濾鏡可使圖形具有藝術效果，對源圖形的數學參數不會改變，只是進行了渲染后傳給顯示器。
濾鏡filter和標識marker使用方法是一樣的。在<defs>中定義，設定一個id定義需要用到的濾鏡，在調用。
可以通過W3C看一些需要的濾鏡效果。
SVG漸變：
有線性漸變<linearGradient>、放射性漸變<radialGradient>。
漸變也是定義在<defs>標簽中，定義一個id號，在調用這個id。例：
<defs> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
//水平線性漸變 <stop offset="0%" stop-color="#F00" /> <stop offset="100%" stop-color="#0FF" /> </linearGradient> </defs> //offset定義漸變開始的位置 //stop-color定義此位置的顏色 <rect fill="url(#myGradient)" x="10" y="10" width="300" height="100">
//垂直線性漸變 就將x1、x2、y1、y2分別變成0%、0%、0%、100%