D3.js是一個JavaScript庫，用於根據資料處理文件。它使用HTML、CSS和SVG等技術，建立可以在任何現代瀏覽器上檢視的資料可視表示形式。

它還為互動和動畫提供了一些很棒的功能。在本教程中，我們將探討D3.js的基本概念和功能。我們將在幾個示例的幫助下學習如何使用它，例如渲染條形圖，渲染HTML和SVG元素以及對其應用轉換和事件。

D3入門

由於D3.js是一個JavaScript庫，因此您只需將其包含在HTML檔案中的script標籤內即可。

引入D3

DOM選擇

使用D3.js，我們可以操作文件物件模型（DOM），這意味著我們可以選擇元素並對其進行各種轉換。讓我們從一個簡單的示例開始，在該示例中，我們將使用D3選擇和更改標題標記的顏色和字型大小。

HTML程式碼

因此，我們只是將select()方法連結到d3物件上，然後更新style()。第一個引數指示我們要更改的內容，第二個引數給出值。結果如下：

執行效果

資料繫結

您需要學習的下一個概念是資料繫結，因為這是D3最酷的功能之一。使用它，我們可以實時填充或操作DOM元素。

在我們的HTML中，我們有一個簡單的無序列表<ul>：

HTML程式碼

我們要使用資料物件建立列表元素。這是執行此操作的程式碼：

JavaScript程式碼

在上面的JavaScript程式碼中，D3首先使用方法選擇<ul>以及<li>內部的任何元素，在建立所有元素之前先選擇所有元素似乎有些奇怪，但這就是D3的工作方式。select('ul').selectAll('li')，然後，我們使用data()方法傳遞資料，並新增enter()，其工作方式類似於迴圈。此後的所有操作將對fruits陣列中的每個專案執行一次。

對於每個<li>標籤，它還使用text()方法在其中附加文字，回撥函式d內部的引數text()引用給定迭代中的陣列元素（apple，mango等）。

所以這是我們的最終結果：

執行效果

建立SVG元素

可伸縮向量圖形（SVG）是一種在DOM中呈現圖形元素和影象的方法。由於SVG基於向量，因此既輕巧又可擴充套件。D3使用SVG來建立其所有視覺效果，因此它是庫的核心構建塊。

在下面的示例中，此處是使用SVG容器中的D3繪製的矩形。

JavaScript程式碼

在此程式碼中，D3正在DOM中渲染一個矩形元素。它首先選擇SVG元素，然後在其中渲染一個矩形元素。它還使用attr()方法設定矩形的x和y座標及其寬度，高度和填充屬性。

執行效果

建立條形圖

D3還使我們可以建立許多不同型別的圖表，以有效的方式表示資料。在下面的示例中，我們使用D3建立一個簡單的條形圖。

讓我們從直接在HTML中建立SVG標籤開始。

HTML程式碼

然後，我們將編寫我們需要的JavaScript，以便在<svg>標籤中呈現條形圖：

JavaScript程式碼

在此程式碼中，我們有一個數字陣列，這些數字將用於呈現條形圖，陣列中的每個專案都代表一個條。此外，我們還要了解：條形圖只是寬度或高度可變的矩形。

選擇SVG和矩形元素後，我們使用data()方法傳遞資料集並呼叫enter()以開始迴圈資料。

對於每個資料項，我們渲染一個矩形並將其寬度設定為其值。然後，我們設定每個小節的高度，並且為了避免重疊，我們透過從中減去1為它提供了一些填充barHeight。

然後，我們使用translate屬性轉換條形，該屬性將使每個矩形一個接一個地定位，而不是從同一點開始。transform()採用一個回撥函式，該函式獲取其引數中的資料和索引。我們透過將索引乘以條形的高度來平移y軸上的矩形。

執行效果圖

JavaScript程式碼

執行效果

D3.js是一個非常強大而又簡單的JavaScript庫，它使您可以使用HTML，CSS和SVG來基於資料玩轉文件並賦予其生命，快試一試吧！