D3.js學習筆記（六）——SVG基礎圖形和D3.js

目標

　　在這一章，咱們將會重溫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;});

　　將上述例子化簡後，能夠看作這一過程爲兩步：

1. 建立SVG容器（SVG座標空間）
2. 畫圓形

　　所以，在最簡單的狀況，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".

　　咱們也能夠把畫長方形分紅兩步：

1. 建立一個SVG容器（SVG座標空間）
2. 畫長方形

　　所以，在最簡單的狀況下，咱們的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".

　　咱們一樣能夠分爲兩步：

1. 建立SVG容器（SVG座標空間）
2. 畫直線

　　最簡單的例子爲：

　　

//建立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。