一、元素操作：
1、選擇元素
select 和 selectAll，以及選擇集的概念
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 是代表索引號的，於是便可以用條件判定語句來指定執行的元素。
2、插入元素
插入元素涉及的函數有兩個：
append()：在選擇集末尾插入元素
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 元素
3、刪除元素
刪除一個元素時，對於選擇的元素，使用 remove 即可
var body = d3.select("body"); var p = body.select("#myid"); p.remove(); //刪除指定 id 的段落元素
二、畫布是什么
之前的處理對象都是 HTML 的文字，沒有涉及圖形的制作。要繪圖，首要需要的是一塊繪圖的“畫布”。
HTML 5 提供兩種強有力的“畫布”：SVG 和 Canvas。
1、SVG 是什么
SVG，指可縮放矢量圖形（Scalable Vector Graphics），是用於描述二維矢量圖形的一種圖形格式，是由萬維網聯盟制定的開放標准。
SVG 使用 XML 格式來定義圖形，除了 IE8 之前的版本外，絕大部分瀏覽器都支持 SVG，可將 SVG 文本直接嵌入 HTML 中顯示。
SVG 有如下特點：
（1）SVG 繪制的是矢量圖，因此對圖像進行放大不會失真。
（2）基於 XML，可以為每個元素添加 JavaScript 事件處理器。
（3）每個圖形均視為對象，更改對象的屬性，圖形也會改變。
（4）不適合游戲應用。
2、Canvas 是什么
Canvas 是通過 JavaScript 來繪制 2D 圖形，是 HTML 5 中新增的元素。
Canvas 有如下特點：
（1）繪制的是位圖，圖像放大后會失真。
（2）不支持事件處理器。
（3）能夠以 .png 或 .jpg 格式保存圖像
（4）適合游戲應用
3、添加畫布
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); //設定高度
有了畫布，接下來就可以在畫布上作圖了。
4、繪制矩形
這里繪制一個橫向的柱形圖。只繪制矩形，不繪制文字和坐標軸。在 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 的形式，方便歸類和修改。