select 和 selectAll,以及選擇集的概念html
var p = d3.select("body").select("p") // 使用 select ,參數傳入 p 便可,如此返回的是第一個 p 元素
var p = d3.select("body").selectAll("p") // 使用 selectAll 選擇 body 中全部的 p 元素
var p = d3.select("body").select("#myId") // 使用 select 選擇id元素
var p = d3.select("body").selectAll(".myClass") // 要用 selectAll 選擇class元素
關於 select 和 selectAll 的參數,實際上是符合 CSS 選擇器的條件的,即用「井號(#)」表示 id,用「點(.)」表示 class。數組
此外,對於已經綁定了數據的選擇集,還有一種選擇元素的方法,那就是靈活運用 function(d, i)。咱們已經知道參數 i 是表明索引號的,因而即可以用條件斷定語句來指定執行的元素。瀏覽器
插入元素涉及的函數有兩個:app
append():在選擇集末尾插入元素svg
insert():在選擇集前面插入元素函數
var body = d3.select("body"); body.append("p") .text("append p element");//在 body 的末尾添加一個 p 元素
body.insert("p","#myId") .text("insert p element");//在 body 中 id 爲 myid 的元素前添加一個 p 元素
刪除一個元素時,對於選擇的元素,使用 remove 便可spa
var body = d3.select("body"); var p = body.select("#myid"); p.remove(); //刪除指定 id 的段落元素
以前的處理對象都是 HTML 的文字,沒有涉及圖形的製做。要繪圖,首要須要的是一塊繪圖的「畫布」。code
HTML 5 提供兩種強有力的「畫布」:SVG 和 Canvas。htm
SVG,指可縮放矢量圖形(Scalable Vector Graphics),是用於描述二維矢量圖形的一種圖形格式,是由萬維網聯盟制定的開放標準。對象
SVG 使用 XML 格式來定義圖形,除了 IE8 以前的版本外,絕大部分瀏覽器都支持 SVG,可將 SVG 文本直接嵌入 HTML 中顯示。
SVG 有以下特色:
(1)SVG 繪製的是矢量圖,所以對圖像進行放大不會失真。
(2)基於 XML,能夠爲每一個元素添加 JavaScript 事件處理器。
(3)每一個圖形均視爲對象,更改對象的屬性,圖形也會改變。
(4)不適合遊戲應用。
Canvas 是經過 JavaScript 來繪製 2D 圖形,是 HTML 5 中新增的元素。
Canvas 有以下特色:
(1)繪製的是位圖,圖像放大後會失真。
(2)不支持事件處理器。
(3)可以以 .png 或 .jpg 格式保存圖像
(4)適合遊戲應用
D3 雖然沒有明文規定必定要在 SVG 中繪圖,可是 D3 提供了衆多的 SVG 圖形的生成器,它們都是隻支持 SVG 的。所以,建議使用 SVG 畫布。
使用 D3 在 body 元素中添加 svg 的代碼以下:
var width = 300; //畫布的寬度
var height = 300; //畫布的高度
var svg = d3.select("body") //選擇文檔中的body元素
.append("svg") //添加一個svg元素
.attr("width", width) //設定寬度
.attr("height", height); //設定高度
有了畫布,接下來就能夠在畫布上做圖了。
這裏繪製一個橫向的柱形圖。只繪製矩形,不繪製文字和座標軸。在 SVG 中,矩形的元素標籤是 rect。例如:
<svg>
<rect></rect>
<rect></rect>
</svg>
上面的 rect 裏沒有矩形的屬性。矩形的屬性,經常使用的有四個:
x:矩形左上角的 x 座標
y:矩形左上角的 y 座標
width:矩形的寬度
height:矩形的高度
要注意,在 SVG 中,x 軸的正方向是水平向右,y 軸的正方向是垂直向下的。
<html>
<head>
<meta charset="utf-8">
<title>簡單矩形</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 300; //畫布的寬度
var height = 300; //畫布的高度
var svg = d3.select("body") //選擇文檔中的body元素
.append("svg") //添加一個svg元素
.attr("width", width) //設定寬度
.attr("height", height); //設定高度
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //數據(表示矩形的寬度)
var rectHeight = 25; //每一個矩形所佔的像素高度(包括空白)
svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return d; }) .attr("height",rectHeight-2) .attr("fill","steelblue"); </script>
</body>
</html>
這段代碼添加了與 dataset 數組的長度相同數量的矩形,所使用的語句是:
svg.selectAll("rect") //選擇svg內全部的矩形
.data(dataset) //綁定數組
.enter() //指定選擇集的enter部分
.append("rect") //添加足夠數量的矩形元素
這段代碼之後會經常出如今 D3 的代碼中,請務必牢記。當:有數據,而沒有足夠圖形元素的時候,使用此方法能夠添加足夠的元素。
添加了元素以後,就須要分別給各元素的屬性賦值。在這裏用到了 function(d, i),前面已經講過,d 表明與當前元素綁定的數據,i 表明索引號。給屬性賦值的時候,是須要用到被綁定的數據,以及索引號的。
最後一行的:.attr("fill","steelblue"); 是給矩形元素設置顏色。通常來講,最好寫成外置 CSS 的形式,方便歸類和修改。