D3是用于數據可視化的Javascript庫。使用SVG，Canvas和HTML。結合強大的可視化技術和數據驅動的DOM操作方法。

D3與JQuery的區別 D3是數據驅動的，JQuery不是：我們使用JQuery直接操縱元素；但是使用D3
時我們需要通過D3專有的data()，enter()和exit()方法提供數據和回調，然后D3操作元素。 D3通常用于數據可視化；JQuery用于創建Web應用。D3有很多數據可視化擴展；JQuery有很多Web應用插件。兩者都是Javascript DOM操作庫，提供CSS選擇器和流暢的API。

What is the difference between D3 and JQuery?

最常用的方法

d3.select(selector)：選擇第一個匹配selector的元素。如果沒有匹配的元素，返回一個空的選擇（但不是null或undefined）。

d3.selectAll(selector)：與select()不同的是，會選擇所有匹配的元素。

selection.append(type)：如果指定的type是一個字符串，則將這個type（標簽名稱）作為新元素附加到每個選定元素的最后一個子元素。

selection.attr(name, [value])：value確定時，將selection中名為name的屬性值設置成value。value可以為常量或者方法。如果value沒有給出，返回selection中第一個非空元素的name屬性當前值。

selection.data([data[,key]])：將數據和元素綁定起來，并返回一個新的selection。

selection.enter()：返回enter selection。此時DOM元素少于對應的數據。用于添加缺少的DOM元素。比如：

如果body是空的，上面的代碼就會根據數據創建新的p元素，然后添加到body元素中，并將文本內容設置為對應的數字。頁面結果如下：

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit()：返回exit selection。此時DOM元素多于對應的數據。用于移除多余的DOM元素。比如，基于上面的例子，我們要更新數據：

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

因為此時指定了key方法（用于指定數據和元素匹配的順序等），并且數據[4,8,16]匹配已經存在的元素，所以update selection只包含3個p元素。我們可以使用enter selection添加3個新元素：

p.enter().append("p").text(function(d) { return d; });

然后，還需要移除不需要的元素[15, 23, 42]：

p.exit().remove();

頁面結果：

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

制作柱狀圖

柱狀圖示例

使用D3的時候，要對SVG的結構有一個了解。要繪出什么圖形，需要用到什么標簽，標簽需要定義什么屬性。
比如，制作一個柱狀圖，主要是XY坐標軸和柱形。XY軸用到line標簽繪制直線，以及text標簽顯示刻度的文字。柱形用到rect標簽繪制長方形，那如果要帶圓角的長方形，我們可以設置rect標簽的rx或ry屬性，如果要定義長方形的位置，需要設置x和y屬性等。就這樣，一部分一部分的組合到一起成為一張圖。

以下的內容是基于D3 3.x 的API，有些接口跟D3 4.0是不同的。
D3 3.x API Reference
D3 4.0 API Reference

根部的svg

D3繪圖首先要創建一個svg元素并定義寬高等屬性：

坐標軸
制作坐標軸首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ，設置坐標軸的比例尺，或者返回當前的比例尺。比例尺分為：

定量比例尺：連續的數據，比如數字。時間比例尺：數據是時間。序數比例尺：離散的數據，比如名稱，類別等。

比如我們要制作一個有時間刻度的X軸和一個數字刻度的Y軸，就可以使用時間比例尺和定量比例尺，或者更具體的說，線性比例尺。

d3.scale.linear()：創建一個線性比例尺。 d3.time.scale()：創建一個時間比例尺?？潭群涂潭雀袷脚渲脼楸镜貢r間。

確定比例尺之后還需要設置輸入域和輸出范圍。比如一個x軸的比例尺為：

最小日期和最大日期都是Date對象。然后設置X坐標軸的比例尺并創建它：

ticks的參數類型取決于對應的比例尺的類型，這里傳的參數是時間間隔，也就是說刻度與刻度之間是相隔一天的。
tickFormat則讓我們可以自定義刻度的文字格式。

值得一說的是，如果數據中對應X軸的數據是字符串，比如‘2017-08-12'。那綁定到頁面上的數據是需要被處理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一個字符串string解析為一個日期。 d3.time.format(specifier)：根據給定的specifier創建一個當地時間格式化。

比如：

最后，在svg元素中添加坐標軸：

selection.call(function[, arguments…])方法調用指定的方法一次，并把selection跟隨參數一起傳遞到方法中。

柱狀圖中的長方形
具體步驟：將數據跟頁面元素綁定，并創建所需要的頁面元素，具體設置每個頁面元素的樣式位置，以及事件監聽等。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com