d3-系列-基礎簡介

本篇文章會介紹怎麼繪製一個圓圈，一條線，一個矩形。

1.SVG是什麼？

先介紹SVG，在d3的世界裡的重要性就如何html中的body元素一樣，它可以認為d3元素的母體，麼有SVG，d3就沒有發揮的餘地。一般來說，IE8一下的是不支援SVG的，因此對瀏覽器相容方面是有點缺陷的。

1.1 如何繪製SVG？

首先要建立一個SVG元素，一般我們會把它儲存下來，留作以後使用

var svg = d3.select("body").append("svg");

僅僅建立它還不夠，我們需要設定它的寬和高

svg.attr('width', 500).attr('height', 400);

d3.js是可以鏈式程式設計的，因此你可以把上面兩句連成一句話來使用。

代替的html程式碼：

<svg width="500" height="400"></svg> 

2.如何在SVG的基礎上繪製一個圓圈？

類似於繪製SVG一樣，我們現在要在svg變數上append一個圓圈，而繪製圓圈需要圓的半徑，圓圈的圓心坐在的橫座標和縱座標，因此在程式碼裡面我們也要寫明這幾點。

var circle = svg.append('circle').attr('cx', 250).attr('cy',250).attr('r',25);

代替的html程式碼： 

<circle cx="250" cy="25" r="25"/>

3.如何SVG的基礎上繪製一個矩形？

我覺得走完第二步，大家肯定也知道矩形怎麼繪製了，矩形在這裡是rect元素，我們需要制定的是它的寬高以及左上角的橫座標縱座標,以下程式碼我們繪製出一個姿色的矩形框，試著改變裡面的值看看，你會意識到這些屬性的意義，是不是很神奇？

var rect = svg.append('rect').attr('x',0).attr('y',0).attr('width',30).attr('height',30).attr('fill','purple');

代替的html程式碼

<rect x="0" y="0" width="30" height="30" fill="purple"/>

4.如何在SVG的基礎上繪製一條線？線的元素師line，我們可以制定其實起始橫縱座標，填充顏色等，是不是等不及了？趕緊在自己瀏覽器中嘗試看看吧？

var line = svg.append('line').attr('x1',0).attr('y1',0).attr('x2',500).attr('y2',50).attr('stroke','black');

代替的html程式碼

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

總結：順著這樣，其實在SVG中繪畫d3基本上是這樣的套路，下個版本我會講述d3是怎麼資料驅動圖形的，以及我們可以一起來完成一個資料地圖。