目標
在這一章，我們將會重溫SVG圖形，學習如何使用D3.js來創建這些圖形。
這里會包括前面例子中的SVG基礎圖形以及如何使用D3.js設置圖形的屬性。
使用D3.js畫一個SVG 的 圓 circle
可以使用如下代碼創建：
<svg width="50" height="50">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>
我們在前面的章節已經講過了使用D3.js來創建SVG圓形。
var jsonCircles = [
{"x_axis":30,"y_axis":30,"radius":20,"color":"greeen"},
{"x_axis":70,"y_axis":70,"radius":20,"color":"purple"},
{"x_axis":110,"y_axis":100,"radius":20,"color":"red"}
];
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
var circles =svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle");
var circleAttributes = circles
.attr("cx",function(d){return d.x_axis;})
.attr("cy",function(d){return d.y_axis;})
.attr("r",function(d){return d.radius;})
.style("fill",function(d){return d.color;});
將上述例子化簡后，可以看做這一過程為兩步：
- 創建SVG容器（SVG坐標空間）
- 畫圓形
因此，在最簡單的情況，JavaScript代碼為：
//創建一個SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//畫圓形
var circle = svgContainer.append("circle")
.attr("cx",30)
.attr("cy",30)
.attr("r",20);
結果是：
畫圓的時候，必須的SVG屬性是：“cx”、“cy”以及“r”。
注意——如果我們缺省了“style”-樣式函數，那么我們得到的就是一個黑色的圓形。不過也還好，因為首要的是先畫出來圓形，之后在考慮的是樣式。
在此要強調的是，使用D3.js畫SVG的圓形時，最為重要的屬性是：cx,cy和r。
使用D3.js畫SVG的 長方形 Rectangle
我們可以用下面的代碼畫出一個長方形：
<svg width="50" height="50"> <rect x="0" y="0" width="50" height="50" fill="green"/> </svg>
通過前面的圓形例子，我們大概可以猜得出，創建一個長方形，必須的是“x”,"y","width"以及"height".
我們也可以把畫長方形分成兩步：
- 創建一個SVG容器（SVG坐標空間）
- 畫長方形
因此，在最簡單的情況下，我們的JavaScript代碼如下：
//創建一個SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//畫長方形
var rectangle = svgContainer.append("rect")
.attr("x",10)
.attr("y",10)
.attr("width",50)
.attr("height",100);
結果是：
畫長方形的必須屬性是“x”、"y"、"width"以及"height"。
注意—同上，如果缺省Style()方法，得到的是黑色的長方形。
兩個需要注意的點是：
- SVG中指代長方形（rectangle）的關鍵詞是rect。因此我們寫的是.append("rect")而不是.append("rectangle")。
- SVG坐標系統的布局中，高height是自上而下的。
在此要強調的是，使用D3.js畫SVG的長方形時，最為重要的屬性是：x,y,width和height。
使用D3.js畫SVG的 直線 Straight Line
使用下面的代碼可以創建直線：
<svg width="50" height="50">
<line x1="5" y1="5" x2="40" y2="40" stroke="grey" stroke-width="5" />
</svg>
同樣的，我們大概猜到畫直線必須的是："x1","y1","x2","y2".
我們同樣可以分為兩步：
- 創建SVG容器（SVG坐標空間）
- 畫直線
最簡單的例子為：
//創建SVG容器
var svgContainer = d3.aelect("body").append("svg")
.attr("width",200)
.attr("height",200);
//畫直線
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)
結果是：
我們畫的直線在哪了？？？SVG元素就在那里，但是我們卻看不到。
這是因為SVG的“line”元素就僅僅是“線"，在幾何學上講是一維的，他是沒有大小粗細的，沒有所謂的“內部”。
這也就是說，“line”元素不可能被“填充（filled）”（即fill屬性）。
也就是說，直線是不占用空間的——因此實際上，我們什么都看不到。
為了解決這個問題，我們需要確保：
- .attrbute("stroke-width",NUMBER)，其中的NUMBER是指直線的寬
- .attribute("stroke","COLOR")，其中COLOR是指用來給直線着色的顏色
因此，修改后的最簡例子為：
//創建一個SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
//畫直線
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)
.attr("stroke","black")
.attr("stroke-width",2);
結果是：
太棒了！現在看的到啦！
畫直線必須的SVG屬性是"x1","y1","x2","y2","stroke"以及"stroke-width"。
注意-這里我們沒有使用style方法，因為‘line’元素只是‘線’而已，沒有“內部”可言，也就沒有什么填充色之類的，在幾何學上將，它是一維的。所以，我們在設置其樣式的時候，就需要設置“stroke”顏色以及“stroke-width”。
使用D3.js畫折線和多邊形
在基本圖形中，我們還應該畫“折線（polyline）”和“多邊形（polygon）”。
可以通過下面的代碼創建SVG折線和多邊形：
折線 代碼：
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points = "05,30
15,30
15,20
25,20
35,10 "/>
</svg>
多邊形 代碼：
<svg width="50" height="50"> <polygon fill="yellow" stroke="blue" stroke-width="2" points="05,30 15,30 25,20 25,10 35,10" /> </svg>
通過上面這些圓形、長方形、直線的例子，你大概能猜到，要創建一個折線 和 多邊形 圖形，需要的屬性是：“stroke”、“stroke-width”以及“points”。對於多邊形Polygon還需要“fill”屬性。
然而，正如你所看到的，points屬性包含了一個點（point）列表，其中節點的x，y值由逗號隔開，每對坐標值之間通過空格隔開。
這樣做很不美觀。D3.js熱衷於數據可視化以及美好的事物，d3.js的慣例是使用D3.svg.line()生成器來畫折線和多邊形。
為了能夠使用D3.js創建SVG基本圖形折線（Polyline）和多邊形（Polygon），我們將必須學習SVG Paths。