D3入門

前言

在說D3以前，應該先了解svg，若是svg都不知道的話，可能d3在作什麼你就很難懂了。因此我會先說一個SVG的入門，而後再講D3

SVG簡介

什麼是SVG： SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用於網絡的基於矢量的圖形 ，SVG 使用 XML 格式定義圖形 。SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失。

SVG 的歷史和優點：
在 2003 年一月，SVG 1.1 被確立爲 W3C 標準。

參與定義 SVG 的組織有：Sun公司（已被Oracle公司收購）、Adobe、蘋果公司、IBM 以及柯達。

與其餘圖像格式相比，使用 SVG 的優點在於：

• SVG 可被很是多的工具讀取和修改，好比記事本。
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印。
• SVG 可在圖像質量不降低的狀況下被放大。
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
• SVG 是開放的標準
• SVG 文件是純粹的 XML
• Flash 相比，SVG 最大的優點是與其餘標準（好比 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術

SVG元素

• rect : x="10" y="10" height="90" width="90" rx="5" ry="5"

x,y就是矩形左上角座標，rx，ry就是矩形的圓角寬高。

• circle ： cx="50" cy="150" r="40"

cx、cy就是圓心座標，r是半徑

• ellipse ：cx="150" cy="150" rx="50" ry="30"

cx、cy就是圓心座標，rx、ry就是圓的長寬兩個半徑

• line：x1="10" y1="200" x2="10" y2="300"

（x1,y1）是起點座標，(x2,y2)是終點座標。

• polyline：points="80,320 130,320 95,400 80,320"

points就是一系列的座標點，從第一個點開始直線鏈接下一個點，直到結束。若是你想要圖形封閉，能夠把起始點再加在末尾。

• path: <path d="M50,50 A30,30 0 0,1 35,20 L100,100 M110,11 L100,0" style="stroke:#660000; fill:none;"/>

path元素的全部繪圖都在d屬性中指定。d屬性包含繪製命令。上面的例子中，M發出「移至」命令，A發出「弧」命令，L發出「線段」命令。這些命令都做用在一個「虛擬畫筆」。這支筆能夠移動，繪製形狀等。

SVG座標系

在SVG座標系中，x=0,y=0點在左上角。與正常的圖座標系相比，y軸被反轉。隨着SVG中y的增長，點、形狀等向下移動，而不是向上。

D3簡介

D3 的全稱是（Data-Driven Documents）, 顧名思義能夠知道是一個被數據驅動的文檔。D3.js是一個基於數據的操做文檔的JavaScript庫，可讓你綁定任何數據到DOM，支持DIV這種圖案生成，也支持SVG這種圖案的生成。D3幫助你屏蔽了瀏覽器差別，作出來圖案的效果能夠說是炫目得一塌糊塗，但是代碼卻很簡潔。

模塊劃分

D3能夠整個模塊安裝使用，也能夠只安裝你須要的模塊
下面是我用過的幾個模塊
Arrays (Statistics, Search, Transformations, Histograms)
數組操做，排序，搜索，總結，統計數據，搜索，變換，直方圖
Axes
建立座標軸，以及座標軸相關的設置，操做等。會建立相關dom元素
Brushes
刷子組件，選擇區域用。會建立相關dom元素
Dragging
拖拽組件，用於實現拖拽事件
Scales (Continuous, Sequential, Quantize, Ordinal)
比例尺，會和座標軸結合使用
Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
選擇集
Transitions
過渡組件，用來定義一些過渡效果
Zooming
縮放組件

API

具體的API詳解，稍等一下。。。。
API地址

簡單例子

未完待續。。。😳