javascript中D3圖形庫使用方法

並在標籤中引入：<script src =http://d3.v2.min.js></script>

用D3實現資料視覺效果，首先需要定義資料。我們將採用json格式的資料。當然可以使用其他類型的資料。

var data = {“east” : [ {"orderNum":12}

, {"orderNum":20}

, {"orderNum":30}

, {"orderNum":40}

, {"orderNum":40}

]};

在D3中的select命令，主要功能是選擇資料要操作的元素。

下面正式書寫D3語句。在script標籤中，我們定義一個dirst方法，參數為上面定義的data 資料。

Function dirst(){
 
D3.selectAll(“body”)
 
 .append(“svg”)
 
.attr(“width”,”1000”)
 
.attr(“height”,”600”)
 
.style(“background”,”pink”)
 
.selectAll(“circle”)
 
.data(data.east)
 
.enter()
 
.append(“circle”)
 
d3.selectAll("circle")
 
.attr("cx",function(d){ return Math.random()*900+(d.orderNum+10)})
 
.attr("cy",function(d){return Math.random()*(500)+(d.orderNum+10)})
 
.attr("r",function(d){return d.orderNum})
 
.style("fill",red)
 
.style("stroke","black")
 
.style("stroke-width",1)
 
};
 

D3.select(“body”)我們選擇了body這個標籤元素。

在這裡首先介紹一個概念，SVG:用於描述二維向量圖形的一種圖形格式。

因此任何SVG圖形的表現都必須在SVG內部實現。

.append(“svg”)添加SVG標籤.

並且設定了SVG的寬，高和背景顏色。

.attr(“width”,300)，注意SVG標籤的許多屬性是沒有’px’的。

在SVG上建立circle元素。每個circle元素包含著一組data. orderNum的成員數組。

如數學概念一樣，如果要確定一個圓，需要知道他的圓心和半徑。

.attr(“cx”,function(d){ return Math.random()*900+(d.orderNum+10)})

.attr(“cy”,function(d){return Math.random()*(500)+(d.orderNum+10)})

就是用來分別確定x軸和y軸上的圓心。我們在回呼函數中使用隨機數實現圓的x軸和y軸的圓心。

在這裡需要說明一下，圓心CX的範圍在10至900之間。

因為我們設的SVG寬度為1000.如果X軸的圓心大約等於1000或者小於0。那麼我們建立的circle在X軸上就會跳出我們SVG的寬度。

同樣Y軸也是如此。

.attr(“r”,function(d){return d.orderNum})為圓的半徑，也使用一個回呼函數確定。傳回值為data數組中的某個資料。

.style(“fill”,red)

.style(“stroke”,”black”)

如上所示我們也設定了circle的填充顏色和邊框顏色。與CSS不同的是邊框顏色用stroke-border定義，類似css中border-color .而fill代表著填充顏色。

這已經實現了一個簡單的將資料通過D3展現成圖形。D3的其他功能會在後面繼續實踐。