- D3.js 教程
- D3.js - 首頁
- D3.js - 簡介
- D3.js - 安裝
- D3.js - 概念
- D3.js - 選擇器
- D3.js - 資料繫結
- D3.js - SVG 簡介
- D3.js - SVG 變換
- D3.js - 過渡
- D3.js - 動畫
- D3.js - 繪製圖表
- D3.js - 圖表
- D3.js - 地理資料
- D3.js - 陣列 API
- D3.js - 集合 API
- D3.js - 選擇器 API
- D3.js - 路徑 API
- D3.js - 比例尺 API
- D3.js - 軸 API
- D3.js - 形狀 API
- D3.js - 顏色 API
- D3.js - 過渡 API
- D3.js - 拖拽 API
- D3.js - 縮放 API
- D3.js - 請求 API
- 分隔符分隔值 API
- D3.js - 定時器 API
- D3.js - 工作示例
- D3.js 有用資源
- D3.js 快速指南
- D3.js - 有用資源
- D3.js - 討論
D3.js 快速指南
D3.js - 簡介
資料視覺化是以圖片或圖形格式呈現資料。資料視覺化的主要目標是透過統計圖形、圖表和資訊圖形清晰有效地傳達資訊。
資料視覺化幫助我們快速有效地傳達見解。任何型別的透過視覺化表示的資料都允許使用者比較資料、生成分析報告、理解模式，從而幫助他們做出決策。資料視覺化可以是互動式的，以便使用者分析圖表中的特定資料。當然，資料視覺化可以使用不同的 JavaScript 框架開發並整合到常規網站甚至移動應用程式中。
什麼是 D3.js？
D3.js 是一個 JavaScript 庫，用於在瀏覽器中建立互動式視覺化。D3.js 庫允許我們操作網頁元素，使其與資料集相關聯。這些元素可以是**HTML、SVG** 或**Canvas 元素**，並且可以根據資料集的內容進行新增、刪除或編輯。它是一個用於操作 DOM 物件的庫。D3.js 可以成為資料探索的寶貴工具，它讓你可以控制資料的表示方式，並讓你新增互動性。
為什麼我們需要 D3.js？
與其他庫相比，D3.js 是首屈一指的框架之一。這是因為它在 Web 上執行，並且其資料視覺化效果卓越。它如此受歡迎的另一個原因在於其靈活性。由於它與現有的 Web 技術無縫協作，並且可以操作文件物件模型的任何部分，因此它與**客戶端 Web 技術棧**（HTML、CSS 和 SVG）一樣靈活。它擁有強大的社群支援，並且易於學習。
D3.js 特性
D3.js 是最好的資料視覺化框架之一，它可以用於生成簡單和複雜的視覺化，以及使用者互動和過渡效果。下面列出了一些主要特性：
- 極其靈活。
- 易於使用且快速。
- 支援大型資料集。
- 宣告式程式設計。
- 程式碼可重用性。
- 擁有各種曲線生成函式。
- 將資料關聯到 html 頁面中的元素或元素組。
D3.js 優勢
D3.js 是一個開源專案，無需任何外掛即可執行。它需要的程式碼很少，並且具有以下優勢：
出色的資料視覺化。
它是模組化的。你可以下載你想要使用的 D3.js 的一小部分。無需每次都載入整個庫。
易於構建圖表元件。
DOM 操作。
在下一章中，我們將瞭解如何在系統上安裝 D3.js。
D3.js - 安裝
在本章中，我們將學習如何設定 D3.js 開發環境。在開始之前，我們需要以下元件：
- D3.js 庫
- 編輯器
- Web 瀏覽器
- Web 伺服器
讓我們詳細瞭解一下每個步驟。
D3.js 庫
為了使用 D3.js 建立資料視覺化，我們需要將 D3.js 庫包含到你的 HTML 網頁中。我們可以透過以下兩種方式實現：
- 從專案的資料夾中包含 D3.js 庫。
- 從 CDN（內容分發網路）中包含 D3.js 庫。
下載 D3.js 庫
D3.js 是一個開源庫，庫的原始碼可以在 https://d3js.org/ 網站上免費獲取。訪問 D3.js 網站並下載最新版本的 D3.js（d3.zip）。截至目前，最新版本為 4.6.0。
下載完成後，解壓縮檔案並查詢**d3.min.js**。這是 D3.js 原始碼的壓縮版本。複製 d3.min.js 檔案並將其貼上到專案的根資料夾或任何其他你想要儲存所有庫檔案的資料夾中。將 d3.min.js 檔案包含到你的 HTML 頁面中，如下所示。
**示例** - 讓我們考慮以下示例。
<!DOCTYPE html>
<html lang = "en">
<head>
<script src = "/path/to/d3.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>
D3.js 是 JavaScript 程式碼，因此我們應該在“script”標籤內編寫所有 D3 程式碼。我們可能需要操作現有的 DOM 元素，因此建議在“body”標籤結束之前編寫 D3 程式碼。
從 CDN 包含 D3 庫
我們可以透過將其從內容分發網路 (CDN) 直接連結到我們的 HTML 頁面中來使用 D3.js 庫。CDN 是一個伺服器網路，檔案儲存在其中，並根據使用者的地理位置交付給使用者。如果我們使用 CDN，則無需下載原始碼。
使用 CDN URL https://d3js.org/d3.v4.min.js 將 D3.js 庫包含到我們的頁面中，如下所示。
**示例** - 讓我們考慮以下示例。
<!DOCTYPE html>
<html lang = "en">
<head>
<script src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>
D3.js 編輯器
我們將需要一個編輯器來開始編寫程式碼。有一些支援 JavaScript 的優秀 IDE（整合開發環境），例如：
- Visual Studio Code
- WebStorm
- Eclipse
- Sublime Text
這些 IDE 提供智慧程式碼補全，並支援一些現代 JavaScript 框架。如果你沒有花哨的 IDE，你始終可以使用基本的編輯器，如記事本、VI 等。
Web 瀏覽器
D3.js 適用於所有瀏覽器，除了 IE8 及更低版本。
Web 伺服器
大多數瀏覽器直接從本地檔案系統提供本地 HTML 檔案。但是，在載入外部資料檔案時存在某些限制。在本教程的後續章節中，我們將從外部檔案（如**CSV** 和**JSON**）載入資料。因此，如果我們從一開始就設定 Web 伺服器，將會更容易。
你可以使用任何你熟悉的 Web 伺服器，例如 IIS、Apache 等。
檢視你的頁面
在大多數情況下，我們只需在 Web 瀏覽器中開啟你的 HTML 檔案即可檢視它。但是，在載入外部資料來源時，執行本地 Web 伺服器並從伺服器**（https://:8080）**檢視你的頁面更可靠。
D3.js - 概念
D3.js 是一個開源的 JavaScript 庫，用於：
- 資料驅動的文件物件模型 (DOM) 操作。
- 處理資料和形狀。
- 為線性、分層、網路和地理資料佈局視覺元素。
- 實現使用者介面 (UI) 狀態之間的平滑過渡。
- 實現有效使用者互動。
Web 標準
在我們可以開始使用 D3.js 建立視覺化之前，我們需要熟悉 Web 標準。以下 Web 標準在 D3.js 中被大量使用。
- 超文字標記語言 (HTML)
- 文件物件模型 (DOM)
- 層疊樣式表 (CSS)
- 可縮放向量圖形 (SVG)
- JavaScript
讓我們詳細瞭解一下每個 Web 標準。
超文字標記語言 (HTML)
眾所周知，HTML 用於構建網頁內容的結構。它儲存在一個副檔名為“.html”的文字檔案中。
**示例** - 一個典型的基本 HTML 示例如下所示
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title></title>
</head>
<body>
</body>
</html>
文件物件模型 (DOM)
當瀏覽器載入 HTML 頁面時，它會被轉換為分層結構。HTML 中的每個標籤都會轉換為 DOM 中具有父子層級關係的元素/物件。這使得我們的 HTML 結構更加邏輯化。一旦 DOM 形成，操作（新增/修改/刪除）頁面上的元素就變得更容易了。
讓我們使用以下 HTML 文件瞭解 DOM：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>My Document</title>
</head>
<body>
<div>
<h1>Greeting</h1>
<p>Hello World!</p>
</div>
</body>
</html>
上述 HTML 文件的文件物件模型如下所示：
層疊樣式表 (CSS)
雖然 HTML 為網頁提供了結構，但 CSS 樣式使網頁看起來更賞心悅目。CSS 是一種**樣式表語言**，用於描述用 HTML 或 XML（包括 SVG 或 XHTML 等 XML 方言）編寫的文件的呈現方式。CSS 描述了元素應該如何在網頁上呈現。
可縮放向量圖形 (SVG)
SVG 是一種在網頁上渲染影像的方式。SVG 不是直接的影像，而只是使用文字建立影像的一種方式。顧名思義，它是一個**可縮放向量**。它根據瀏覽器的尺寸自動縮放，因此調整瀏覽器大小不會導致影像失真。所有瀏覽器都支援 SVG，除了 IE 8 及以下版本。資料視覺化是視覺表示，使用 SVG 透過 D3.js 渲染視覺化非常方便。
可以將 SVG 想象成一個畫布，我們可以在上面繪製不同的形狀。因此，首先，讓我們建立一個 SVG 標籤：
<svg width = "500" height = "500"></<svg>
SVG 的預設測量單位是畫素，因此如果我們的單位是畫素，則無需指定。現在，如果我們想要繪製一個矩形，我們可以使用以下程式碼繪製它：
<svg width = "500" height = "500"> <rect x = "0" y = "0" width = "300" height = "200"></rect> </svg>
我們可以在 SVG 中繪製其他形狀，例如：線條、圓形、橢圓形、文字和路徑。
就像為 HTML 元素設定樣式一樣，為 SVG 元素設定樣式也很簡單。讓我們將矩形的背景顏色設定為黃色。為此，我們需要新增一個屬性“fill”並將值指定為黃色，如下所示：
<svg width = "500" height = "500"> <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect> </svg>
JavaScript
JavaScript 是一種鬆散型別的客戶端指令碼語言，在使用者的瀏覽器中執行。JavaScript 與 HTML 元素（DOM 元素）互動，以使 Web 使用者介面具有互動性。JavaScript 實現了**ECMAScript 標準**，其中包括基於 ECMA-262 規範的核心功能以及其他不基於 ECMAScript 標準的功能。JavaScript 知識是 D3.js 的先決條件。
D3.js - 選擇器
選擇是 D3.js 中的核心概念之一。它基於 CSS 選擇器。它允許我們選擇網頁中的一個或多個元素。此外，它允許我們修改、追加或刪除與預定義資料集相關的元素。在本章中，我們將瞭解如何使用選擇建立資料視覺化。
D3.js 使用以下兩種方法幫助從 HTML 頁面中選擇元素：
select() - 透過匹配給定的 CSS 選擇器僅選擇一個 DOM 元素。如果給定的 CSS 選擇器有多個元素，則只選擇第一個。
selectAll() - 透過匹配給定的 CSS 選擇器選擇所有 DOM 元素。如果您熟悉使用 jQuery 選擇元素，那麼 D3.js 選擇器幾乎相同。
讓我們詳細瞭解每種方法。
select() 方法
select() 方法根據 CSS 選擇器選擇 HTML 元素。在 CSS 選擇器中，您可以透過以下三種方式定義和訪問 HTML 元素：
- HTML 元素的標籤（例如 div、h1、p、span 等，）
- HTML 元素的類名
- HTML 元素的 ID
讓我們透過示例來看一下它的實際應用。
按標籤選擇
您可以使用其標籤來選擇 HTML 元素。以下語法用於選擇“div”標籤元素：
d3.select(“div”)
示例 - 建立一個頁面“select_by_tag.html”並新增以下更改：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div>
Hello World!
</div>
<script>
d3.select("div").text();
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出：
按類名選擇
使用 CSS 類樣式化的 HTML 元素可以使用以下語法選擇。
d3.select(“.<class name>”)
建立一個網頁“select_by_class.html”並新增以下更改：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
ad3.select(".myclass").text();
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出：
按 ID 選擇
HTML 頁面中的每個元素都應該有一個唯一的 ID。我們可以使用元素的這個唯一 ID 透過 select() 方法訪問它，如下所示。
d3.select(“#<id of an element>”)
建立一個網頁“select_by_id.html”並新增以下更改。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "hello">
Hello World!
</div>
<script>
d3.select("#hello").text();
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出。
新增 DOM 元素
D3.js 選擇提供append() 和text() 方法來將新元素附加到現有的 HTML 文件中。本節詳細解釋瞭如何新增 DOM 元素。
append() 方法
append() 方法將新元素作為當前選擇中元素的最後一個子元素附加。此方法還可以修改元素的樣式、屬性、特性、HTML 和文字內容。
建立一個網頁“select_and_append.html”並新增以下更改：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span");
</script>
</body>
</html>
透過瀏覽器請求網頁，您可以在螢幕上看到以下輸出：
這裡，append() 方法在 div 標籤內添加了一個新的 span 標籤，如下所示：
<div class = "myclass"> Hello World!<span></span> </div>
text() 方法
text() 方法用於設定所選/附加元素的內容。讓我們更改上面的示例並新增 text() 方法，如下所示。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select("div.myclass").append("span").text("from D3.js");
</script>
</body>
</html>
現在重新整理網頁，您將看到以下響應。
這裡，上面的指令碼執行了一個鏈式操作。D3.js 巧妙地採用了稱為**鏈式語法**的技術，您可能在**jQuery**中也見過。透過用句點將方法連結在一起，您可以在一行程式碼中執行多個操作。它快速且簡單。相同的指令碼也可以在沒有鏈式語法的情況下訪問，如下所示。
var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");
修改元素
D3.js 提供了各種方法，html()、attr() 和style() 來修改所選元素的內容和樣式。讓我們看看如何在本章中使用修改方法。
html() 方法
html() 方法用於設定所選/附加元素的 html 內容。
建立一個網頁“select_and_add_html.html”並新增以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出。
attr() 方法
attr() 方法用於新增或更新所選元素的屬性。建立一個網頁“select_and_modify.html”並新增以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").attr("style", "color: red");
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出。
style() 方法
style() 方法用於設定所選元素的樣式屬性。建立一個網頁“select_and_style.html”並新增以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class = "myclass">
Hello World!
</div>
<script>
d3.select(".myclass").style("color", "red");
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出。
classed() 方法
classed() 方法專門用於設定 HTML 元素的“class”屬性。由於單個 HTML 元素可以有多個類；在為 HTML 元素分配類時，我們需要小心。此方法知道如何在元素上處理一個或多個類，並且它將具有良好的效能。
新增類 - 要新增類，classed 方法的第二個引數必須設定為 true。它定義如下：
d3.select(".myclass").classed("myanotherclass", true);
刪除類 - 要刪除類，classed 方法的第二個引數必須設定為 false。它定義如下：
d3.select(".myclass").classed("myanotherclass", false);
檢查類 - 要檢查類的存在性，只需省略第二個引數並傳遞您要查詢的類名。如果存在，則返回 true；如果不存在，則返回 false。
d3.select(".myclass").classed("myanotherclass");
如果選擇中的任何元素都具有該類，則返回 true。對於單個元素選擇，請使用d3.select。
切換類 - 要將類翻轉到相反的狀態 - 如果它已經存在則刪除它，如果它尚不存在則新增它 - 您可以執行以下操作之一。
對於單個元素，程式碼可能如下所示：
var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));
selectAll() 方法
selectAll() 方法用於選擇 HTML 文件中的多個元素。select 方法選擇第一個元素，但 selectAll 方法選擇與特定選擇器字串匹配的所有元素。如果選擇不匹配任何內容，則返回空選擇。我們也可以在 selectAll() 方法中連結所有追加修改方法，append()、html()、text()、attr()、style()、classed() 等。在這種情況下，這些方法將影響所有匹配的元素。讓我們透過建立一個新的網頁“select_multiple.html”並新增以下指令碼瞭解一下：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h2 class = "myclass">Message</h2>
<div class = "myclass">
Hello World!
</div>
<script>
d3.selectAll(".myclass").attr("style", "color: red");
</script>
</body>
</html>
透過瀏覽器請求網頁，您將在螢幕上看到以下輸出。
這裡，attr() 方法應用於div 和h2 標籤，並且兩個標籤中文字的顏色都變為紅色。
D3.js - 資料繫結
資料連線是 D3.js 中另一個重要的概念。它與選擇一起工作，使我們能夠根據資料集（一系列數值）操作 HTML 文件。預設情況下，D3.js 在其方法中優先考慮資料集，並且資料集中的每個專案都對應一個 HTML 元素。本章詳細解釋了資料連線。
什麼是資料連線？
資料連線使我們能夠根據現有 HTML 文件中的資料集註入、修改和刪除元素（HTML 元素以及嵌入的 SVG 元素）。預設情況下，資料集中的每個資料項都對應於文件中的一個元素（圖形）。
隨著資料集的變化，相應的元素也可以輕鬆地被操作。資料連線在我們的資料和文件的圖形元素之間建立了密切的關係。資料連線使基於資料集的操作元素變得非常簡單易行。
資料連線如何工作？
資料連線的主要目的是將現有文件的元素與給定的資料集對映起來。它根據給定的資料集建立文件的虛擬表示，並提供用於處理虛擬表示的方法。讓我們考慮以下所示的一個簡單資料集。
[10, 20, 30, 25, 15]
資料集有五個專案，因此它可以對映到文件的五個元素。讓我們使用選擇器的 selectAll() 方法和資料連線的 data() 方法將其對映到以下文件的li 元素。
HTML
<ul id = "list"> <li><li> <li></li> </ul>
D3.js 程式碼
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);
現在，文件中有五個虛擬元素。前兩個虛擬元素是文件中定義的兩個li 元素，如下所示。
1. li - 10 2. li - 20
我們可以對前兩個li 使用所有選擇器的元素修改方法，如attr()、style()、text() 等，如下所示。
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });
text() 方法中的函式用於獲取li 元素對映的資料。這裡，d 代表第一個li 元素的 10 和第二個li 元素的 20。
接下來的三個元素可以對映到任何元素，這可以透過資料連線的 enter() 和選擇器的 append() 方法來完成。enter() 方法允許訪問剩餘的資料（未對映到現有元素的資料），append() 方法用於根據對應的資料建立新元素。讓我們也為剩餘的資料項建立li。資料對映如下：
3. li - 30 4. li - 25 5. li - 15
建立新 li 元素的程式碼如下：
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
資料連線提供了另一種稱為exit() 方法的方法來處理從資料集中動態刪除的資料項，如下所示。
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
這裡，我們從資料集中刪除了第四個專案及其對應的 li，使用了 exit() 和 remove() 方法。
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>
上述程式碼的結果如下：
資料連線方法
資料連線提供以下四種方法來處理資料集：
- datum()
- data()
- enter()
- exit()
讓我們詳細瞭解每種方法。
datum() 方法
datum() 方法用於設定 HTML 文件中單個元素的值。它在使用選擇器選擇元素後使用。例如，我們可以使用 select() 方法選擇一個現有元素（p 標籤），然後使用 datum() 方法設定資料。設定資料後，我們可以更改所選元素的文字，或者新增新元素並使用 datum() 方法設定的資料分配文字。
建立一個頁面“datajoin_datum.html”並新增以下程式碼：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<p></p>
<div></div>
<script>
d3.select("p")
.datum(50)
.text(function(d) {
return "Used existing paragraph element and the data " + d + " is assigned.";
});
d3.select("div")
.datum(100)
.append("p")
.text(function(d) {
return "Created new paragraph element and the data " + d + " is assigned.";
});
</script>
</body>
</html>
上述程式碼的輸出如下。
data() 方法
data() 方法用於將資料集分配給 HTML 文件中的一組元素。它在使用選擇器選擇 HTML 元素後使用。在我們的列表示例中，我們使用它為li 選擇器設定資料集。
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15]);
enter() 方法
enter() 方法輸出之前不存在圖形元素的資料項集。在我們的列表示例中，我們使用它來建立新的li 元素。
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d) { return "This is dynamically created element and the value is " + d; });
exit() 方法
exit() 方法輸出不再存在任何資料的圖形元素集。在我們的列表示例中，我們已使用它透過刪除資料集中的資料項來動態刪除其中一個li元素。
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
資料函式
在 DOM 操作章節中，我們學習了 D3.js 中不同的 DOM 操作方法，例如style()、text()等。這些函式中的每一個通常都將一個常量值作為其引數。然而，在資料連線的上下文中，它將一個匿名函式作為引數。此匿名函式獲取對應的資料以及使用 data() 方法分配的資料集的索引。因此，此匿名函式將為繫結到 DOM 的每個資料值呼叫。請考慮以下 text() 函式。
.text(function(d, i) {
return d;
});
在此函式內，我們可以應用任何邏輯來操作資料。這些是匿名函式，這意味著沒有名稱與函式關聯。除了資料 (d) 和索引 (i) 引數之外，我們還可以使用this關鍵字訪問當前物件，如下所示 -
.text(function (d, i) {
console.log(d); // the data element
console.log(i); // the index element
console.log(this); // the current DOM object
return d;
});
請考慮以下示例。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<script>
var data = [1, 2, 3];
var paragraph = d3.select("body")
.selectAll("p")
.data(data)
.text(function (d, i) {
console.log("d: " + d);
console.log("i: " + i);
console.log("this: " + this);
return "The index is " + i + " and the data is " + d;
});
</script>
</body>
</html>
上述指令碼將生成以下結果 -
在上面的示例中，引數“d”提供資料元素，“i”提供陣列中資料的索引，而“this”是當前 DOM 元素的引用。在本例中，它是段落元素。請注意，我們在上面呼叫了 .data(data) 函式。data() 函式為選定的元素提供資料，在本例中是 data 陣列。
D3.js - SVG 簡介
SVG 代表可縮放向量圖形。SVG 是一種基於 XML 的向量圖形格式。它提供繪製不同形狀的選項，例如線條、矩形、圓形、橢圓形等。因此，使用 SVG 設計視覺化效果可以為您提供更多功能和靈活性。
SVG 的特點
SVG 的一些主要特點如下 -
- SVG 是一種基於向量的影像格式，並且它是基於文字的。
- SVG 在結構上類似於 HTML。
- SVG 可以表示為文件物件模型。
- SVG 屬性可以指定為屬性。
- SVG 應相對於原點 (0, 0) 具有絕對位置。
- SVG 可以原樣包含在 HTML 文件中。
一個最小示例
讓我們建立一個最小的 SVG 影像並將其包含在 HTML 文件中。
步驟 1 - 建立一個 SVG 影像並將寬度設定為 300 畫素，高度設定為 300 畫素。
<svg width = "300" height = "300"> </svg>
這裡，svg 標記開始一個 SVG 影像，並且它具有寬度和高度作為屬性。SVG 格式的預設單位是畫素。
步驟 2 - 建立一條從 (100, 100) 開始到 (200, 100) 結束的線，併為線設定紅色。
<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);stroke-width:2"/>
這裡，line 標記繪製一條線，其屬性x1、y1指的是起點，x2、y2指的是終點。style 屬性使用stroke和stroke-width樣式設定線條的顏色和粗細。
x1 - 這是第一個點的 x 座標。
y1 - 這是第一個點的 y 座標。
x2 - 這是第二個點的 x 座標。
y2 - 這是第二個點的 y 座標。
stroke - 線條的顏色。
stroke-width - 線條的粗細。
步驟 3 - 建立一個 HTML 文件“svg_line.html”並將上述 SVG 整合，如下所示 -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
<svg width = "300" height = "300">
<line x1 = "100" y1 = "100"
x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
stroke-width:2"/>
</svg>
</div>
<p></p>
<p></p>
</body>
</html>
上述程式將產生以下結果。
使用 D3.js 的 SVG
要使用 D3.js 建立 SVG，讓我們按照以下步驟操作。
步驟 1 - 建立一個容器來容納 SVG 影像，如下所示。
<div id = "svgcontainer"></div>
步驟 2 - 使用 select() 方法選擇 SVG 容器，並使用 append() 方法注入 SVG 元素。使用 attr() 和 style() 方法新增屬性和樣式。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg").attr("width", width).attr("height", height);
步驟 3 - 同樣，將line元素新增到svg元素中，如下所示。
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
</div>
<script language = "javascript">
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
</script>
</body>
</html>
以上程式碼產生以下結果。
矩形元素
矩形由<rect>標記表示，如下所示。
<rect x = "20" y = "20" width = "300" height = "300"></rect>
矩形的屬性如下 -
x - 這是矩形左上角的 x 座標。
y - 這是矩形左上角的 y 座標。
width - 表示矩形的寬度。
height - 表示矩形的高度。
SVG 中的簡單矩形定義如下所述。
<svg width = "300" height = "300"> <rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect> </svg>
相同的矩形可以動態建立，如下所述。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
//Create and append rectangle element
svg.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 200)
.attr("height", 100)
.attr("fill", "green");
</script>
</body>
</html>
以上程式碼將產生以下結果。
圓形元素
圓形由<circle>標記表示，如下所述。
<circle cx = "200" cy = "50" r = "20"/>
圓形的屬性如下 -
cx - 這是圓形中心的 x 座標。
cy - 這是圓形中心的 y 座標。
r - 表示圓形的半徑。
SVG 中的簡單圓形描述如下。
<svg width = "300" height = "300"> <circle cx = "200" cy = "50" r = "20" fill = "green"/> </svg>
相同的圓形可以動態建立，如下所述。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
//Append circle
svg.append("circle")
.attr("cx", 200)
.attr("cy", 50)
.attr("r", 20)
.attr("fill", "green");
</script>
</body>
</html>
以上程式碼將產生以下結果。
橢圓元素
SVG 橢圓元素由<ellipse>標記表示，如下所述。
<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>
橢圓的屬性如下 -
cx - 這是橢圓中心的 x 座標。
cy - 這是橢圓中心的 y 座標。
rx - 這是圓形的 x 半徑。
ry - 這是圓形的 y 半徑。
SVG 中的簡單橢圓描述如下。
<svg width = "300" height = "300"> <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" /> </svg>
相同的橢圓可以動態建立，如下所示，
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id = "svgcontainer"></div>
<script>
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("ellipse")
.attr("cx", 200)
.attr("cy", 50)
.attr("rx", 100)
.attr("ry", 50)
.attr("fill", "green")
</script>
</body>
</html>
以上程式碼將產生以下結果。
D3.js - SVG 變換
SVG 提供了轉換單個 SVG 形狀元素或 SVG 元素組的選項。SVG 變換支援平移、縮放、旋轉和傾斜。讓我們在本節中學習變換。
SVG 變換簡介
SVG 引入了一個新的屬性transform來支援變換。可能的值如下所示的一個或多個，
平移 - 它有兩個選項，tx指的是沿 x 軸的平移，ty指的是沿 y 軸的平移。例如 - translate(30 30)。
旋轉 - 它有三個選項，angle指的是旋轉角度，cx和cy指的是 x 和 y 軸上的旋轉中心。如果未指定cx和cy，則預設為座標系的當前原點。例如 - rotate(60)。
縮放 - 它有兩個選項，sx指的是沿 x 軸的縮放因子，sy指的是沿 y 軸的縮放因子。這裡，sy是可選的，如果未指定，則取sx的值。例如 - scale(10)。
傾斜 (SkewX 和 SkewY) - 它只有一個選項；skew-angle指的是 SkewX 沿 x 軸的角度，以及 SkewY 沿 y 軸的角度。例如 - skewx(20)。
帶有平移的 SVG 矩形的示例，描述如下 -
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(30 30)">
</rect>
</svg>
</body>
</html>
以上程式碼將產生以下結果。
可以使用空格作為分隔符為單個 SVG 元素指定多個變換。如果指定了多個值，則將按順序依次應用變換。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(60 60) rotate(45)">
</rect>
</svg>
</body>
</html>
以上程式碼將產生以下結果。
變換也可以應用於 SVG 組元素。這使得能夠變換在 SVG 中定義的複雜圖形，如下所述。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</body>
</html>
以上程式碼將產生以下結果。
一個最小示例
要建立 SVG 影像，嘗試使用變換對其進行縮放和旋轉，讓我們按照以下步驟操作。
步驟 1 - 建立一個 SVG 影像並將寬度設定為 300 畫素，高度設定為 300 畫素。
<svg width = "300" height = "300"> </svg>
步驟 2 - 建立一個 SVG 組。
<svg width = "300" height = "300"> <g> </g> </svg>
步驟 3 - 建立一個長度為 60、高度為 30 的矩形，並將其填充為綠色。
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
</g>
</svg>
步驟 4 - 建立一個半徑為 30 的圓形，並將其填充為紅色。
<svg width = "300" height = "300">
<g>
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
步驟 5 - 新增 transform 屬性並新增平移和旋轉，如下所示。
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
步驟 6 - 建立一個 HTML 文件“svg_transform_rotate_group.html”並將上述 SVG 整合，如下所述。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer">
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</div>
</body>
</html>
以上程式碼將產生以下結果。
使用 D3.js 的變換
要使用 D3.js 建立 SVG，讓我們按照以下步驟操作。
步驟 1 - 建立一個容器來容納 SVG 影像，如下所述。
<div id = "svgcontainer"></div>
步驟 2 - 建立一個 SVG 影像，如下所述。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
步驟 3 - 建立一個 SVG 組元素並設定平移和旋轉屬性。
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
步驟 4 - 建立一個 SVG 矩形並將其附加到組內。
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
步驟 5 - 建立一個 SVG 圓形並將其附加到組內。
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
完整程式碼如下：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>SVG rectangle</title>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer"></div>
<script language = "javascript">
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
var group = svg.append("g")
.attr("transform", "translate(60, 60) rotate(30)");
var rect = group.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
</script>
</div>
</body>
</html>
以上程式碼將產生以下結果。
變換庫
D3.js 提供了一個單獨的庫來管理變換，而無需手動建立變換屬性。它提供處理所有型別變換的方法。一些方法是transform()、translate()、scale()、rotate()等。您可以使用以下指令碼在網頁中包含d3-transform。
<script src = "http://d3js.org/d3.v4.min.js"></script> <script src = "d3-transform.js"></script>
在上面的示例中，變換程式碼可以寫成如下所示 -
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);
D3.js - 過渡
過渡是專案從一種狀態更改為另一種狀態的過程。D3.js 提供了一個transition()方法來在 HTML 頁面中執行過渡。讓我們在本節中瞭解過渡。
transition() 方法
transition() 方法可用於所有選擇器，它啟動過渡過程。此方法支援大多數選擇方法，例如 - attr()、style() 等。但是，它不支援 append() 和 data() 方法，這些方法需要在 transition() 方法之前呼叫。此外，它還提供特定於過渡的方法，如 duration()、ease() 等。一個簡單的過渡可以定義如下 -
d3.select("body")
.transition()
.style("background-color", "lightblue");
可以使用 d3.transition() 方法直接建立過渡，然後與選擇器一起使用，如下所示。
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");
一個最小示例
現在讓我們建立一個基本示例來了解過渡是如何工作的。
建立一個新的 HTML 檔案transition_simple.html，其中包含以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>
在這裡，我們選擇了body元素，然後透過呼叫 transition() 方法啟動過渡。然後，我們指示將背景顏色從當前顏色白色過渡到淺藍色。
現在，重新整理瀏覽器，螢幕上的背景顏色將從白色變為淺藍色。如果我們想將背景顏色從淺藍色更改為灰色，我們可以使用以下過渡 -
d3.select("body").transition().style("background-color", "gray");
D3.js - 動畫
D3.js 透過過渡支援動畫。我們可以透過正確使用過渡來進行動畫。過渡是關鍵幀動畫的一種有限形式，只有兩個關鍵幀 - 開始和結束。起始關鍵幀通常是 DOM 的當前狀態，結束關鍵幀是您指定的屬性、樣式和其他屬性集。過渡非常適合過渡到新檢視，而無需依賴於起始檢視的複雜程式碼。
示例 - 讓我們考慮“transition_color.html”頁面中的以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").style("background-color", "lightblue")
// make the background-color lightblue.transition()
.style("background-color", "gray");
// make the background-color gray
</script>
</body>
</html>
這裡，文件的背景顏色從白色變為淺灰色，然後變為灰色。
duration() 方法
duration() 方法允許屬性更改在指定持續時間內平滑發生，而不是瞬時發生。讓我們使用以下程式碼建立需要 5 秒的過渡。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.selectAll("h3").transition().style("color","green").duration(5000);
</script>
</body>
</html>
這裡，過渡平滑且均勻地發生。我們還可以使用以下方法直接分配 RGB 顏色程式碼值。
d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);
現在，每個顏色數字都從 0 到 150 緩慢、平滑且均勻地變化。為了從起始幀值到結束幀值獲得中間幀的精確混合，D3.js 使用內部插值方法。語法如下 -
d3.interpolate(a, b)
D3 還支援以下插值型別 -
interpolateNumber - 支援數值。
interpolateRgb - 支援顏色。
interpolateString - 支援字串。
D3.js 負責使用正確的插值方法，在高階情況下，我們可以直接使用插值方法來獲得我們想要的結果。如果需要，我們甚至可以建立一個新的插值方法。
delay() 方法
delay() 方法允許過渡在一段時間後發生。請考慮“transition_delay.html”中的以下程式碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> Simple transitions </h3>
<script>
d3.selectAll("h3").transition()
.style("font-size","28px").delay(2000).duration(2000);
</script>
</body>
</html>
過渡的生命週期
過渡具有四個階段的生命週期 -
- 過渡被排程。
- 過渡開始。
- 過渡執行。
- 過渡結束。
讓我們逐一詳細瞭解這些內容。
過渡被排程
建立過渡時，它會被排程。當我們呼叫selection.transition時，我們正在排程一個過渡。這也是我們呼叫attr()、style()和其他過渡方法來定義結束關鍵幀的時候。
過渡開始
過渡根據其延遲開始，該延遲是在排程過渡時指定的。如果沒有指定延遲，則過渡儘快開始，通常是在幾毫秒後。
如果過渡有延遲，則應僅在過渡開始時設定起始值。我們可以透過監聽開始事件來做到這一點 -
d3.select("body")
.transition()
.delay(200)
.each("start", function() { d3.select(this).style("color", "green"); })
.style("color", "red");
過渡執行
當過渡執行時，它會以 0 到 1 之間的過渡值重複呼叫。除了延遲和持續時間之外，過渡還具有緩動來控制時間。緩動會扭曲時間，例如慢入慢出。某些緩動函式可能會暫時給出大於 1 或小於 0 的 t 值。
過渡結束
過渡結束時間始終正好為 1，以便在過渡結束時準確設定結束值。過渡根據其延遲和持續時間的總和結束。當過渡結束時，將分派結束事件。
D3.js - 繪製圖表
D3.js 用於建立靜態 SVG 圖表。它有助於繪製以下圖表 -
- 條形圖
- 圓形圖
- 餅圖
- 環形圖
- 折線圖
- 氣泡圖等。
本章介紹如何在 D3 中繪製圖表。讓我們詳細瞭解每個圖表。
條形圖
條形圖是最常用的圖表型別之一，用於顯示和比較不同離散類別或組的數量、頻率或其他度量（例如平均值）。該圖表以這樣的方式構建：不同條形的高度或長度與其代表的類別的規模成正比。
x 軸（水平軸）表示不同的類別，它沒有刻度。y 軸（垂直軸）確實有刻度，它表示測量單位。條形可以垂直或水平繪製，具體取決於類別的數量以及類別長度或複雜性。
繪製條形圖
讓我們使用 D3 在 SVG 中建立一個條形圖。對於此示例，我們可以使用rect 元素作為條形，並使用text 元素顯示與條形對應的資料值。
要使用 D3 在 SVG 中建立條形圖，請按照以下步驟操作。
步驟 1 - 在 rect 元素中新增樣式 - 讓我們將以下樣式新增到 rect 元素中。
svg rect {
fill: gray;
}
步驟 2 - 在文字元素中新增樣式 - 新增以下 CSS 類以將樣式應用於文字值。將此樣式新增到 SVG 文字元素中。定義如下 -
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
這裡，Fill 用於應用顏色。Text-anchor 用於將文字定位到條形的右側。
步驟 3 - 定義變數 - 讓我們在指令碼中新增變數。解釋如下。
<script>
var data = [10, 5, 12, 15];
var width = 300,
scaleFactor = 20,
barHeight = 30;
</script>
這裡，
寬度 - SVG 的寬度。
縮放因子 - 縮放為螢幕上可見的畫素值。
條形高度 - 這是水平條形的靜態高度。
步驟 4 - 附加 SVG 元素 - 讓我們使用以下程式碼在 D3 中附加 SVG 元素。
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
這裡，我們將首先選擇文件主體，建立一個新的 SVG 元素，然後將其附加。我們將在此 SVG 元素內構建我們的條形圖。然後，設定 SVG 的寬度和高度。高度計算為條形高度 * 資料值的數量。
我們已將條形高度設定為 30，資料陣列長度為 4。然後 SVG 高度計算為 barheight* datalength，即 120 px。
步驟 5 - 應用變換 - 讓我們使用以下程式碼在條形中應用變換。
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
這裡，每個條形內部都對應一個元素。因此，我們建立組元素。我們的每個組元素都需要一個接一個地定位以構建水平條形圖。讓我們採用變換公式 index * 條形高度。
步驟 6 - 將矩形元素附加到條形 - 在上一步中，我們附加了組元素。現在使用以下程式碼將矩形元素新增到條形中。
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
這裡，寬度為（資料值 * 縮放因子），高度為（條形高度 - 邊距）。
步驟 7 - 顯示資料 - 這是最後一步。讓我們使用以下程式碼在每個條形上顯示資料。
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
這裡，寬度定義為（資料值 * 縮放因子）。文字元素不支援填充或邊距。因此，我們需要給它一個“dy”偏移量。這用於垂直對齊文字。
步驟 8 - 工作示例 - 完整的程式碼清單如下面的程式碼塊所示。建立一個網頁barcharts.html並新增以下更改。
barcharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect {
fill: gray;
}
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [10, 5, 12, 15];
var width = 300
scaleFactor = 20,
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>
現在請求您的瀏覽器，您將看到以下響應。
圓形圖
圓形圖是一種圓形統計圖形，它被分成多個扇區以說明數值比例。
繪製圓形圖
讓我們使用 D3 在 SVG 中建立一個圓形圖。為此，我們必須遵循以下步驟 -
步驟 1 - 定義變數 - 讓我們在指令碼中新增變數。它顯示在下面的程式碼塊中。
<script> var width = 400; var height = 400; var data = [10, 20, 30]; var colors = ['green', 'purple', 'yellow']; </script>
這裡，
寬度 - SVG 的寬度。
高度 - SVG 的高度。
資料 - 資料元素陣列。
顏色 - 將顏色應用於圓形元素。
步驟 2 - 附加 SVG 元素 - 讓我們使用以下程式碼在 D3 中附加 SVG 元素。
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
步驟 3 - 應用變換 - 讓我們使用以下程式碼在 SVG 中應用變換。
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
這裡，
var g = svg.selectAll(“g”) - 建立組元素以容納圓形。
.data(data) - 將我們的資料陣列繫結到組元素。
.enter() - 為我們的組元素建立佔位符。
.append(“g”) - 將組元素附加到我們的頁面。
.attr("transform", function(d, i) {
return "translate(0,0)";
})
這裡，translate 用於相對於原點定位元素。
步驟 4 - 附加圓形元素 - 現在，使用以下程式碼將圓形元素附加到組。
g.append("circle")
現在，使用以下程式碼向組新增屬性。
.attr("cx", function(d, i) {
return i*75 + 50;
})
這裡，我們使用每個圓形中心的 x 座標。我們將圓形的索引乘以 75，並在圓形之間新增 50 的填充。
接下來，我們設定每個圓形中心的 y 座標。這用於統一所有圓形，定義如下。
.attr("cy", function(d, i) {
return 75;
})
接下來，設定每個圓形的半徑。定義如下，
.attr("r", function(d) {
return d*1.5;
})
這裡，半徑乘以資料值以及常數“1.5”以增加圓形的大小。最後，使用以下程式碼為每個圓形填充顏色。
.attr("fill", function(d, i){
return colors[i];
})
步驟 5 - 顯示資料 - 這是最後一步。讓我們使用以下程式碼在每個圓形上顯示資料。
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});
步驟 6 - 工作示例 - 完整的程式碼清單如下面的程式碼塊所示。建立一個網頁circlecharts.html並在其中新增以下更改。
circlecharts.html
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>
現在，請求您的瀏覽器，以下將是響應。
餅圖
餅圖是一種圓形統計圖形。它被分成多個扇區以顯示數值比例。讓我們瞭解如何在 D3 中建立餅圖。
繪製餅圖
在開始繪製餅圖之前，我們需要了解以下兩種方法 -
- d3.arc() 方法和
- d3.pie() 方法。
讓我們詳細瞭解這兩種方法。
d3.arc() 方法 - d3.arc() 方法生成一個弧形。您需要為弧形設定內半徑和外半徑。如果內半徑為 0，則結果將是餅圖，否則結果將是環形圖，這將在下一節中討論。
d3.pie() 方法 - d3.pie() 方法用於生成餅圖。它從資料集中獲取資料，並計算餅圖每個扇區的起始角度和結束角度。
讓我們使用以下步驟繪製餅圖。
步驟 1 - 應用樣式 - 讓我們將以下樣式應用於弧形元素。
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
這裡，fill 用於應用顏色。Text-anchor 用於將文字定位到弧形的中心。
步驟 2 - 定義變數 - 在指令碼中定義變數，如下所示。
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
</script>
這裡，
寬度 - SVG 的寬度。
高度 - SVG 的高度。
半徑 - 它可以使用 Math.min(width, height) / 2 的函式計算；
步驟 3 - 應用變換 - 使用以下程式碼在 SVG 中應用以下變換。
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
現在使用d3.scaleOrdinal函式新增顏色，如下所示。
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
步驟 4 - 生成餅圖 - 現在，使用下面給出的函式生成餅圖。
var pie = d3.pie()
.value(function(d) { return d.percent; });
這裡，您可以繪製百分比值。需要一個匿名函式來返回d.percent並將其設定為餅圖值。
步驟 5 - 為餅圖扇區定義弧形 - 生成餅圖後，現在使用下面給出的函式為每個餅圖扇區定義弧形。
var arc = d3.arc() .outerRadius(radius) .innerRadius(0);
這裡，此弧形將設定為路徑元素。計算出的半徑設定為 outerradius，而 innerradius 設定為 0。
步驟 6 - 在扇區中新增標籤 - 透過提供半徑在餅圖扇區中新增標籤。定義如下。
var label = d3 .arc() .outerRadius(radius) .innerRadius(radius - 80);
步驟 7 - 讀取資料 - 這是一個重要步驟。我們可以使用下面給出的函式讀取資料。
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});
這裡，populations.csv包含資料檔案。d3.csv函式從資料集中讀取資料。如果資料不存在，它會丟擲錯誤。我們可以將此檔案包含在您的 D3 路徑中。
步驟 8 - 載入資料 - 下一步是使用以下程式碼載入資料。
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
這裡，我們可以為資料集中每個資料值的組元素分配資料。
步驟 9 - 附加路徑 - 現在，附加路徑並將類“arc”分配給組，如下所示。
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });
這裡，fill 用於應用資料顏色。它取自d3.scaleOrdinal函式。
步驟 10 - 附加文字 - 使用以下程式碼在標籤中顯示文字。
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
這裡，SVG 文字元素用於在標籤中顯示文字。我們之前使用d3.arc()建立的標籤弧返回一個質心點，它是標籤的位置。最後，我們使用d.data.browser提供資料。
步驟 11 - 附加組元素 - 附加組元素屬性並將類 title 新增到顏色文字並使其斜體，這在步驟 1 中指定，定義如下。
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")
步驟 12 - 工作示例 - 要繪製餅圖，我們可以使用印度人口的資料集。此資料集在虛構網站中顯示人口，定義如下。
population.csv
states,percent UP,80.00 Maharastra,70.00 Bihar,65.0 MP,60.00 Gujarat,50.0 WB,49.0 TN,35.0
讓我們為上述資料集建立餅圖視覺化。建立一個網頁“piechart.html”並在其中新增以下程式碼。
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
</style>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400"></svg>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
]);
var pie = d3.pie().value(function(d) {
return d.percent;
});
var path = d3.arc()
.outerRadius(radius - 10).innerRadius(0);
var label = d3.arc()
.outerRadius(radius).innerRadius(radius - 80);
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.states); });
console.log(arc)
arc.append("text").attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
});
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text").text("Top population states in india")
.attr("class", "title")
</script>
</body>
</html>
環形圖
環形圖或甜甜圈圖只是一個內部帶有孔的簡單餅圖。我們可以將孔的半徑定義為您需要的任何大小，以百分比或畫素為單位。我們可以建立環形圖而不是餅圖。更改弧形的內半徑以使用大於零的值。定義如下。
var arc = d3.arc() .outerRadius(radius) .innerRadius(100);
與餅圖編碼相同，並且內半徑略有變化，我們可以生成環形圖。建立一個網頁dounutchart.html並在其中新增以下更改。
Donutchart.html
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
</style>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400"></svg>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height) / 2;
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
]);
var pie = d3.pie().value(function(d) {
return d.percent;
});
var path = d3.arc()
.outerRadius(radius)
.innerRadius(100);
var label = d3.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.states); });
console.log(arc)
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
});
svg.append("g")
.attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
.append("text")
.attr("class", "title")
</script>
</body>
</html>
這裡，我們更改了路徑變數為 -
var path = d3.arc() .outerRadius(radius) .innerRadius(100);
我們將 innerRadius 值設定為 >0 以生成甜甜圈圖。現在，請求瀏覽器，我們可以看到以下響應。
D3.js - 圖表
圖形是一個二維平面空間，表示為矩形。圖形具有座標空間，其中 x = 0 和 y = 0 座標落在左下方。根據數學笛卡爾座標空間，圖形的 X 座標從左到右增長，Y 座標從下到上增長。
當我們談論繪製一個座標為 x = 30 和 y = 30 的圓時，我們從左下角向右移動 30 個單位，然後向上移動 30 個單位。
SVG 座標空間
SVG 座標空間的工作方式與數學圖形座標空間相同，除了兩個重要的特性 -
- SVG 座標空間的 x = 0 和 y = 0 座標落在左上方。
- SVG 座標空間的 Y 座標從上到下增長。
SVG 座標空間圖形
當我們在 SVG 座標空間中談論繪製一個座標為 x = 30 和 y = 30 的圓時，我們從左上方向右移動 30 個單位，然後向下移動 30 個單位。其定義如下。
var svgContainer = d3
.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);
假設，SVG 元素是一個寬 200 個單位，高 200 個單位的圖形。我們現在知道 X 和 Y 零座標位於左上方。我們現在還知道，隨著 Y 座標的增長，它將從圖形的頂部移動到底部。您可以如下所示設定 SVG 元素的樣式。
var svgContainer = d3
.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.style("border", "1px solid black");
圖形示例
讓我們考慮一個折線圖的例子。
折線圖 - 折線圖用於視覺化某些事物隨時間的變化值。它比較兩個變數。每個變數都沿一個軸繪製。折線圖具有垂直軸和水平軸。
在這個示例圖形中，我們可以將 csv 檔案記錄作為 2006 年到 2017 年印度各邦人口增長資料。讓我們首先建立一個 data.csv 來顯示人口記錄。
在您的 D3 資料夾中建立一個新的 csv 檔案 -
year,population 2006,40 2008,45 2010,48 2012,51 2014,53 2016,57 2017,62
現在，儲存檔案並執行以下步驟以在 D3 中繪製折線圖。讓我們詳細瞭解每個步驟。
步驟 1 - 新增樣式 - 讓我們使用下面給出的程式碼為 line 類新增樣式。
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
步驟 2 - 定義變數 - SVG 屬性定義如下。
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
這裡，第一行定義了四個邊距，它們圍繞圖形所在塊的周圍。
步驟 3 - 定義線 - 使用 d3.line() 函式繪製一條新線，如下所示。
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.population); });
這裡，Year 表示 X 軸記錄中的資料，而 population 表示 Y 軸中的資料。
步驟 4 - 附加 SVG 屬性 - 使用以下程式碼附加 SVG 屬性和組元素。
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
這裡，我們附加了組元素並應用了轉換。
步驟 5 - 讀取資料 - 現在，我們可以從我們的資料集 data.csv 中讀取資料。
d3.csv("data.csv", function(error, data) {
if (error) throw error;
}
這裡，data.csv 不存在，它會丟擲一個錯誤。
步驟 6 - 格式化資料 - 現在，使用以下程式碼格式化資料。
data.forEach(function(d) {
d.year = d.year;
d.population = +d.population;
});
以上程式碼確保從 csv 檔案中提取的所有值都正確設定和格式化。每一行包含兩個值 - 一個是 'year' 的值，另一個是 'population' 的值。該函式一次一行地提取 'year' 和 'population' 的值。
步驟 7 - 設定比例範圍 - 資料格式化後，您可以設定 X 和 Y 的比例範圍。
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
步驟 8 - 附加路徑 - 附加路徑和資料，如下所示。
svg.append("path").data([data])
.attr("class", "line").attr("d", valueline);
步驟 9 - 新增 X 軸 - 現在，您可以使用以下程式碼新增 X 軸。
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
步驟 10 - 新增 Y 軸 - 我們可以如下所示將 Y 軸新增到組中。
svg.append("g")
.call(d3.axisLeft(y));
步驟 11 - 工作示例 - 完整的程式碼在以下程式碼塊中給出。建立一個簡單的網頁 linegraphs.html 並對其進行以下更改。
graph.html
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
.line {
fill: none;
stroke: green;
stroke-width: 5px;
}
</style>
</head>
<body>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.population); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d) {
d.year = d.year;
d.population = +d.population;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
});
</script>
</body>
</html>
現在請求瀏覽器，我們將看到以下結果。
D3.js - 地理資料
地理空間座標通常用於天氣或人口資料。D3.js 為我們提供了三個地理資料工具 -
路徑 - 它們生成最終畫素。
投影 - 它們將球面座標轉換為笛卡爾座標，並且
流 - 它們加快了速度。
在學習 D3.js 中的地理是什麼之前，我們應該瞭解以下兩個術語 -
- D3 Geo Path 和
- 投影
讓我們詳細討論這兩個術語。
D3 Geo Path
它是一個地理路徑生成器。GeoJSON 生成 SVG 路徑資料字串或將路徑渲染到 Canvas。對於動態或互動式投影，建議使用 Canvas 以提高效能。要生成 D3 Geo Path 資料生成器，您可以呼叫以下函式。
d3.geo.path()
這裡，d3.geo.path() 路徑生成器函式允許我們選擇要用於從地理座標到笛卡爾座標轉換的哪個地圖投影。
例如，如果我們想顯示印度的地圖詳細資訊，我們可以定義如下所示的路徑。
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))
投影
投影將球面多邊形幾何體轉換為平面多邊形幾何體。D3 提供以下投影實現。
方位角 - 方位角投影將球體直接投影到平面上。
複合 - 複合由多個組合成單個顯示的投影組成。
圓錐 - 將球體投影到圓錐上，然後將圓錐展開到平面上。
圓柱 - 圓柱投影將球體投影到包含的圓柱體上，然後將圓柱體展開到平面上。
要建立新的投影，您可以使用以下函式。
d3.geoProjection(project)
它從指定的原始投影 project 構造一個新的投影。project 函式採用以弧度表示的給定點的經度和緯度。您可以在程式碼中應用以下投影。
var width = 400 var height = 400 var projection = d3.geo.orthographic() var projections = d3.geo.equirectangular() var project = d3.geo.gnomonic() var p = d3.geo.mercator() var pro = d3.geo.transverseMercator() .scale(100) .rotate([100,0,0]) .translate([width/2, height/2]) .clipAngle(45);
這裡，我們可以應用上述任何一個投影。讓我們簡要討論每個投影。
d3.geo.orthographic() - 正射投影是一種方位角投影，適用於顯示單個半球；透視點在無限遠處。
d3.geo.gnomonic() - 仰視投影是一種方位角投影，將大圓投影為直線。
d3.geo.equirectangular() - 等距圓柱投影是最簡單的地理投影。恆等函式。它既不是等面積的也不是保角的，但有時用於柵格資料。
d3.geo.mercator() - 球面墨卡託投影通常由平鋪地相簿使用。
d3.geo.transverseMercator() - 橫軸墨卡託投影。
工作示例
讓我們在這個例子中建立印度地圖。為此，我們應該遵守以下步驟。
步驟 1 - 應用樣式 - 讓我們使用以下程式碼在 map 中新增樣式。
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>
這裡，我們為 TN、AP 和 MP 州應用了特定的顏色。
步驟 2 - 包含 topojson 指令碼 - TopoJSON 是 GeoJSON 的擴充套件，它編碼拓撲，其定義如下。
<script src = "http://d3js.org/topojson.v0.min.js"></script>
我們可以在我們的程式碼中包含此指令碼。
步驟 3 - 定義變數 - 使用以下程式碼在指令碼中新增變數。
var width = 600; var height = 400; var projection = d3.geo.mercator() .center([78, 22]) .scale(680) .translate([width / 2, height / 2]);
這裡，SVG 寬度為 600，高度為 400。螢幕是一個二維空間，我們試圖呈現一個三維物件。因此，我們可以使用 d3.geo.mercator() 函式嚴重扭曲土地大小/形狀。
中心指定為 [78, 22]，這將投影的中心設定為指定位置，作為經度和緯度的二維陣列（以度為單位），並返回投影。
這裡，地圖已以西經 78 度和北緯 22 度為中心。
比例指定為 680，這將投影的比例因子設定為指定值。如果未指定比例，則返回當前比例因子，預設為 150。需要注意的是，不同投影的比例因子不一致。
步驟 4 - 附加 SVG - 現在，附加 SVG 屬性。
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
步驟 5 - 建立路徑 - 程式碼的以下部分建立一個新的地理路徑生成器。
var path = d3.geo.path() .projection(projection);
這裡，路徑生成器 (d3.geo.path()) 用於指定投影型別 (.projection)，它之前已定義為使用變數 projection 的墨卡託投影。
步驟 6 - 生成資料 - indiatopo.json – 此檔案包含許多記錄，我們可以從以下附件輕鬆下載。
下載 indiatopo.json 檔案
下載檔案後，我們可以將其新增到我們的 D3 位置。示例格式如下所示。
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................
步驟 7 - 繪製地圖 - 現在，從 indiatopo.json 檔案讀取資料並繪製地圖。
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});
這裡，我們將載入包含印度地圖座標的 TopoJSON 檔案 (indiatopo.json)。然後我們宣告我們將對圖形中的所有路徑元素進行操作。其定義為 g.selectAll(“path”)。然後我們將從 TopoJSON 檔案中提取定義國家/地區的資料。
.data(topojson.object(topology, topology.objects.states) .geometries)
最後，我們將使用 .enter() 方法將其新增到我們將顯示的資料中，然後使用 .append(“path”) 方法將該資料附加為路徑元素。
D3.js - 陣列 API
D3 包含一組模組。您可以獨立使用每個模組，或將一組模組組合在一起以執行操作。本章詳細解釋了陣列 API。
什麼是陣列？
陣列包含一個固定大小的相同型別元素的順序集合。陣列用於儲存資料集合，但將其視為相同型別變數的集合通常更有用。
配置 API
您可以使用以下指令碼輕鬆配置 API。
<script src = "https://d3js.org/d3-array.v1.min.js"></script> <body> <script> </script> </body>
陣列統計 API 方法
以下是一些最重要的陣列統計 API 方法。
- d3.min(array)
- d3.max(array)
- d3.extent(array)
- d3.sum(array)
- d3.mean(array)
- d3.quantile(array)
- d3.variance(array)
- d3.deviation(array)
讓我們詳細討論每個方法。
d3.min(array)
它使用自然順序返回給定陣列中的最小值。
示例 - 考慮以下指令碼。
<script> var data = [20,40,60,80,100]; console.log(d3.min(data)); </script>
結果 - 上述指令碼在您的控制檯中返回陣列中的最小值 20。
d3.max(array)
它返回給定陣列中的最大值。
示例 - 考慮以下指令碼。
<script> var data = [20,40,60,80,100]; console.log(d3.max(data)); </script>
結果 - 上述指令碼在您的控制檯中返回陣列中的最大值 (100)。
d3.extent(array)
它返回給定陣列中的最小值和最大值。
示例 - 考慮以下指令碼。
<script> var data = [20,40,60,80,100]; console.log(d3.extent(data)); </script>
結果 - 上述指令碼返回範圍值 [20,100]。
d3.sum(array)
它返回給定數字陣列的總和。如果陣列為空，則返回 0。
示例 - 考慮以下內容。
<script> var data = [20,40,60,80,100]; console.log(d3.sum(data)); </script>
結果 - 上述指令碼返回總和值為 300。
d3.mean(array)
它返回給定數字陣列的平均值。
示例 - 考慮以下內容。
<script> var data = [20,40,60,80,100]; console.log(d3.mean(data)); </script>
結果 - 上述指令碼返回平均值為 60。類似地，您可以檢查中位數。
d3.quantile(array)
它返回給定排序數字陣列的 p 分位數，其中 p 是範圍 [0, 1] 中的數字。例如，可以使用 p = 0.5 計算中位數，使用 p = 0.25 計算第一四分位數，使用 p = 0.75 計算第三四分位數。此實現使用 R-7 方法，預設 R 程式語言和 Excel。
示例 - 考慮以下示例。
var data = [20, 40, 60, 80, 100]; d3.quantile(data, 0); // output is 20 d3.quantile(data, 0.5); // output is 60 d3.quantile(data, 1); // output is 100
類似地，您可以檢查其他值。
d3.variance(array)
它返回給定數字陣列的方差。
示例 - 考慮以下指令碼。
<script> var data = [20,40,60,80,100]; console.log(d3.variance(data)); </script>
結果 - 上述指令碼返回方差值為 1000。
d3.deviation(array)
它返回給定陣列的標準差。如果陣列的值少於兩個，則返回未定義。
示例 - 考慮以下內容。
<script> var data = [20,40,60,80,100]; console.log(d3.deviation(data)); </script>
結果 - 上述指令碼返回偏差值為 31.622776601683793。
示例 − 讓我們使用以下指令碼執行上面討論的所有陣列 API 方法。建立一個網頁“array.html”並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 array API</h3>
<script>
var data = [20,40,60,80,100];
console.log(d3.min(data));
console.log(d3.max(data));
console.log(d3.extent(data));
console.log(d3.sum(data));
console.log(d3.mean(data));
console.log(d3.quantile(data,0.5));
console.log(d3.variance(data));
console.log(d3.deviation(data));
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
陣列搜尋 API 方法
以下是一些重要的陣列搜尋 API 方法。
- d3.scan(array)
- d3.ascending(a, b)
讓我們詳細瞭解這兩者。
d3.scan(array)
此方法用於對指定的陣列執行線性掃描。它返回指定比較器中最小的元素的索引。下面定義了一個簡單的示例。
示例 −
var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1
d3.ascending(a, b)
此方法用於執行比較器函式。它可以實現為 −
function ascending(a, b) {
return a < b ? -1 : a > b ? 1 : a > = b ? 0 : NaN;
}
如果未為內建排序方法指定比較器函式，則預設順序為字母順序。如果 a 小於 b，則上述函式返回 -1；如果 a 大於 b，則返回 1；否則返回 0。
類似地，您可以執行 descending(a, b) 方法。如果 a 大於 b，則返回 -1；如果 a 小於 b，則返回 1；否則返回 0。此函式執行反向自然順序。
示例 −
建立一個網頁array_search.html並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 array API</h3>
<script>
var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下結果。
陣列轉換 API
以下是一些最突出的陣列轉換 API 方法。
- d3.cross(a, b[, reducer])
- d3.merge(arrays)
- d3.pairs(array[, reducer])
- d3.permute(array, indexes)
- d3.zip(arrays)
讓我們詳細瞭解每個方法。
d3.cross(a, b[, reducer])
此方法用於返回給定的兩個陣列 a 和 b 的笛卡爾積。下面定義了一個簡單的示例。
d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]
d3.merge(arrays)
此方法用於合併陣列，定義如下。
d3.merge([[10], [20]]); // output is [10, 20]
d3.pairs(array[, reducer])
此方法用於配對陣列元素，定義如下。
d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]
d3.permute(array, indexes)
此方法用於根據指定的陣列和索引執行排列。您還可以將物件中的值轉換為陣列。下面對其進行了說明。
var object = {fruit:"mango", color: "yellow"},
fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"
d3.zip(arrays)
此方法用於返回一個數組的陣列。如果陣列僅包含一個數組，則返回的陣列包含一個元素陣列。如果未指定任何引數，則返回的陣列為空。定義如下。
d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]
示例 − 建立一個網頁array_transform並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 array API</h3>
<script>
console.log(d3.cross([10, 20], ["a", "b"]));
console.log(d3.merge([[10], [30]]));
console.log(d3.pairs([10, 20, 30, 40]));
var object = {fruit:"mango", color: "yellow"},
fields = ["fruit", "color"];
console.log(d3.permute(object, fields));
console.log(d3.zip([10, 20], [30, 40]));
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
D3.js - 集合 API
集合只是一個將多個元素組合成一個單元的物件。它也稱為容器。本章詳細解釋了集合 API。
配置 API
您可以使用以下指令碼配置 API。
<script src = "https://d3js.org/d3-collection.v1.min.js"></script> <script> </script>
集合 API 方法
集合 API 包含物件、對映、集合和巢狀。以下是最常用的集合 API 方法。
- 物件 API
- 對映 API
- 集合 API
- 巢狀 API
讓我們詳細瞭解每個 API。
物件 API
物件 API 是一種重要的資料型別。它支援以下方法 −
d3.keys(object) − 此方法包含物件屬性鍵，並返回一個屬性名稱陣列。
d3.values(object) − 此方法包含物件值，並返回一個屬性值陣列。
d3.entries(object) − 此方法用於返回一個包含指定物件鍵和值的陣列。每個條目都是一個包含鍵和值的物件。
示例 − 讓我們考慮以下程式碼。
d3.entries({one: 1})
這裡，鍵是 one，值是 1。
示例 − 建立一個網頁objects.html並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 collection API</h3>
<script>
var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
console.log(d3.keys(month));
console.log(d3.values(month));
console.log(d3.entries(month));
</script>
</body>
</html>
現在，請求瀏覽器，您將看到以下響應。
對映 API
對映根據鍵值對包含值。每個鍵值對稱為一個條目。對映僅包含唯一的鍵。它有助於根據鍵搜尋、更新或刪除元素。讓我們詳細瞭解各種對映 API 方法。
d3.map([object[, key]]) − 此方法用於建立一個新的對映。物件用於複製所有可列舉屬性。
map.has(key) − 此方法用於檢查對映是否為指定的鍵字串包含條目。
map.get(key) − 此方法用於返回指定鍵字串的值。
map.set(key, value) − 此方法用於設定指定鍵字串的值。如果對映先前為相同的鍵字串包含條目，則舊條目將替換為新值。
map.remove(key) − 用於刪除對映條目。如果未指定鍵，則返回 false。
map.clear() − 刪除此對映中的所有條目。
map.keys() − 返回此對映中每個條目的字串鍵陣列。
map.values() − 返回此對映中每個條目的值陣列。
map.entries() − 返回此對映中每個條目的鍵值物件陣列。
(x) map.each(function) − 此方法用於為對映中的每個條目呼叫指定的函式。
(xi) map.empty() − 當且僅當此對映沒有條目時返回 true。
(xii) map.size() − 返回此對映中的條目數。
示例 − 建立一個網頁maps.html並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 collection API</h3>
<script>
var month = d3.map([{name: "jan"}, {name: "feb"}],
function(d) { return d.name; });
console.log(month.get("jan")); // {"name": "jan"}
console.log(month.get("apr")); // undefined
console.log(month.has("feb")); // true
var map = d3.map().set("fruit", "mango");
console.log(map.get("fruit")); // mango
console.log(map.remove("fruit")); // remove key and return true.
console.log(map.size()); // size is 0 because key removed.
console.log(map.empty()); // true
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
同樣，您也可以執行其他操作。
集合 API
集合是一個不能包含重複元素的集合。它模擬了數學集合抽象。讓我們詳細瞭解各種集合 API 方法。
d3.set([array[, accessor]]) − 此方法用於建立一個新的集合。陣列用於新增字串值。訪問器是可選的。
set.has(value) − 此方法用於檢查集合是否為指定的 value 字串包含條目。
set.add(value) − 用於將指定的 value 字串新增到集合中。
set.remove(value) − 用於刪除包含指定的 value 字串的集合。
set.clear() − 刪除此集合中的所有值。
set.values() − 此方法用於返回集合的值陣列。
set.empty() − 當且僅當此集合沒有值時返回 true。
set.size() − 返回此集合中的值數。
示例 − 建立一個網頁sets.html並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 collection API</h3>
<script>
var fruits = d3.set().add("mango")
.add("apple").add("orange");
console.log(fruits.has("grapes")); // return false.
console.log(fruits.remove("apple")); //true
console.log(fruits.size()); // size is 2
console.log(fruits.empty()); // true
</script>
</body>
</html>
現在，請求瀏覽器，我們將在螢幕上看到以下響應。
同樣，我們也可以執行其他操作。
巢狀 API
巢狀 API 包含陣列中的元素，並以分層樹結構執行。讓我們詳細瞭解各種巢狀 API 方法。
d3.nest() − 此方法用於建立一個新的巢狀。
nest.key(key) − 此方法用於初始化一個新的鍵函式。此函式用於呼叫輸入陣列中的每個元素，並將元素返回到組中。
nest.sortKeys(comparator) − 此方法用於根據指定的比較器對鍵進行排序。函式定義為 d3.ascending 或 d3.descending。
nest.sortValues(comparator) − 此方法用於根據指定的比較器對值進行排序。比較器函式對葉子元素進行排序。
nest.map(array) − 此方法用於應用指定的陣列，並返回一個巢狀對映。返回的對映中的每個條目對應於第一個鍵函式返回的不同鍵值。條目值取決於已註冊的鍵函式的數量。
nest.object(array) − 此方法用於將巢狀運算子應用於指定的陣列並返回一個巢狀物件。
nest.entries(array) − 此方法用於將巢狀運算子應用於指定的陣列並返回一個鍵值條目的陣列。
考慮一個簡單的網頁nest.html來執行上述討論的巢狀方法。
**示例** - 讓我們考慮以下示例。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 Nest API</h3>
<script>
var data = [
{
"color" : "red",
"key" : 1
},
{
"color" : "green",
"key" : 2
},
{
"color" : "blue",
"key" : 75
}
]
var nest = d3.nest()
.key(function (d) { return d.color; })
.entries(data)console.log(nest);
var filter = nest.filter(function (d) { return d.key = = = 'red' })
console.log(filter);
</script>
</body>
</html>
現在，在瀏覽器中檢查結果，我們將看到以下結果。
Array[3] 0: Object 1: Object 2: Object length: 3 __proto__: Array[0] Array[1] 0: Object length: 1 __proto__: Array[0]
D3.js - 選擇器 API
選擇是文件物件模型 (DOM) 的強大資料驅動轉換。它用於設定屬性、樣式、特性、HTML 或文字內容等等。本章詳細解釋了選擇 API。
配置 API
您可以使用以下指令碼直接配置 API。
<script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script> </script>
選擇 API 方法
以下是選擇 API 中最重要的方法。
- d3.selection()
- d3.select(selector)
- d3.selectAll(selector)
- selection.selectAll(selector)
- selection.filter(filter)
- selection.merge(other)
- d3.matcher(selector)
- d3.creator(name)
- selection.each(function)
- selection.call(function[, arguments…])
- d3.local()
- local.set(node, value)
- local.get(node)
- local.remove(node)
現在讓我們詳細討論每個方法。
d3.selection()
此方法用於選擇根元素。此函式還可以用於測試選擇或擴充套件選擇 d3js。
d3.select(selector)
此方法用於選擇與指定的 selector 字串匹配的第一個元素。
**示例** - 讓我們考慮以下示例。
var body = d3.select("body");
如果 selector 不是字串，則它選擇指定的節點，定義如下。
d3.select("p").style("color", "red");
d3.selectAll(selector)
此方法選擇所有與指定的 selector 字串匹配的元素。
**示例** - 讓我們考慮以下示例。
var body = d3.selectAll("body");
如果 selector 不是字串，則它選擇指定的節點陣列，定義如下。
d3.selectAll("body").style("color", "red");
selection.selectAll(selector)
此方法用於選擇元素。它選擇與指定的 selector 字串匹配的後代元素。返回的選擇中的元素按此選擇中相應的父節點進行分組。如果當前元素沒有與指定的 selector 匹配的元素，或者如果 selector 為 null，則當前索引處的組將為空。
**示例** - 讓我們考慮以下示例。
var b = d3.selectAll("p").selectAll("b");
selection.filter(filter)
此方法用於篩選選擇，返回一個僅包含指定篩選器為 true 的元素的新選擇。
**示例** - 讓我們考慮以下示例。
var even = d3.selectAll("tr").filter(":nth-child(odd)");
這裡，篩選表格行選擇僅返回奇數行。
selection.merge(other)
此方法用於返回一個與指定的 other 選擇合併的新選擇。
**示例** - 讓我們考慮以下示例。
var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);
d3.matcher(selector)
此方法用於分配指定的 selector。它返回一個函式，該函式返回 true。
**示例** - 讓我們考慮以下示例。
var p = selection.filter(d3.matcher("p"));
d3.creator(name)
此方法用於分配指定的元素名稱。它返回一個函式，該函式建立一個給定名稱的元素，假設這是父元素。
**示例** - 讓我們考慮以下示例。
selection.append(d3.creator("p"));
selection.each(function)
此方法用於為每個選定的元素呼叫指定的函式，順序由當前資料 (d)、當前索引 (i) 和當前組 (nodes) 傳遞，其中 this 為當前 DOM 元素 (nodes[i])。下面將對此進行解釋。
parent.each(function(p, j) {
d3.select(this)
.selectAll(".child")
.text(function(d, i) { return "child " + d.name + " of " + p.name; });
});
selection.call(function[, arguments…])
它用於精確呼叫一次指定的函式。語法如下所示。
function name(selection, first, last) {
selection.attr("first-name", first).attr("last-name", last);
}
此方法可以按如下所示指定。
d3.selectAll("p").call(name, "Adam", "David");
d3.local()
D3 local 允許您定義獨立於資料的區域性狀態。
**示例** - 讓我們考慮以下示例。
var data = d3.local();
與 var 不同，每個 local 的值也由 DOM 限定作用域。
local.set(node, value)
此方法將此 local 在指定節點上的值設定為 value。
**示例** - 讓我們考慮以下示例。
selection.each(function(d)
{ data.set(this, d.value); });
local.get(node)
此方法返回此 local 在指定節點上的值。如果節點未定義此 local，則返回定義它的最近祖先的值。
local.remove(node)
此方法從指定節點刪除此 local 的值。如果節點已定義，則返回 true，否則返回 false。
D3.js - 路徑 API
路徑用於繪製矩形、圓形、橢圓形、折線、多邊形、直線和曲線。SVG 路徑表示可以進行描邊、填充、用作剪下路徑或所有三種組合的形狀輪廓。本章詳細介紹了路徑 API。
配置路徑
您可以使用以下指令碼配置路徑 API。
<script src = "https://d3js.org/d3-path.v1.min.js"></script> <script> </script>
路徑 API 方法
一些最常用的路徑 API 方法簡要描述如下。
d3.path() − 此方法用於建立一個新的路徑。
path.moveTo(x, y) − 此方法用於移動指定的 x 和 y 值。
path.closePath() − 此方法用於關閉當前路徑。
path.lineTo(x, y) − 此方法用於從當前點到定義的 x,y 值建立一條線。
path.quadraticCurveTo(cpx, cpy, x, y) − 此方法用於從當前點到指定點繪製二次曲線。
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) − 此方法用於從當前點到指定點繪製貝塞爾曲線。
path.arcTo(x1, y1, x2, y2, radius) − 此方法用於從當前點到指定點 (x1, y1) 繪製圓弧，並在指定點 (x1, y1) 和 (x2, y2) 之間結束線條。
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) − 此方法用於繪製圓弧到指定的中心 (x, y)、半徑、起始角度和結束角度。如果 anticlockwise 值為 true，則圓弧沿逆時針方向繪製，否則沿順時針方向繪製。
path.rect(x, y, w, h) − 此方法用於建立一個新的子路徑，該子路徑僅包含四個點 (x, y)、(x + w, y)、(x + w, y + h)、(x, y + h)。用直線連線這四個點，將子路徑標記為閉合。等效於 context.rect 並使用 SVG 的“lineto”命令。
path.toString() − 根據 SVG 的路徑資料規範返回此路徑的字串表示形式。
示例
讓我們使用路徑 API 在 D3 中繪製一條簡單的線。建立一個網頁 linepath.html 並對其進行以下更改。
<!DOCTYPE html>
<meta charset = "UTF-8">
<head>
<title>SVG path line Generator</title>
</head>
<style>
path {
fill: green;
stroke: #aaa;
}
</style>
<body>
<svg width = "600" height = "100">
<path transform = "translate(200, 0)" />
</svg>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
var lineGenerator = d3.line();
var pathString = lineGenerator(data);
d3.select('path').attr('d', pathString);
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下結果。
D3.js - 比例尺 API
D3.js 提供比例尺函式來執行資料轉換。這些函式將輸入域對映到輸出範圍。
配置 API
我們可以使用以下指令碼直接配置 API。
<script src = "https://d3js.org/d3-array.v1.min.js"></script> <script src = "https://d3js.org/d3-collection.v1.min.js"></script> <script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-format.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-time.v1.min.js"></script> <script src = "https://d3js.org/d3-time-format.v2.min.js"></script> <script src = "https://d3js.org/d3-scale.v1.min.js"></script> <script> </script>
比例尺 API 方法
D3 為不同型別的圖表提供了以下重要的縮放方法。讓我們詳細瞭解一下。
d3.scaleLinear() − 構造一個連續線性比例尺，其中我們可以將輸入資料（域）對映到指定的輸出範圍。
d3.scaleIdentity() − 構造一個線性比例尺，其中輸入資料與輸出資料相同。
d3.scaleTime() − 構造一個線性比例尺，其中輸入資料為日期，輸出資料為數字。
d3.scaleLog() − 構造一個對數比例尺。
d3.scaleSqrt() − 構造一個平方根比例尺。
d3.scalePow() − 構造一個指數比例尺。
d3.scaleSequential() − 構造一個順序比例尺，其中輸出範圍由插值函式固定。
d3.scaleQuantize() − 構造一個具有離散輸出範圍的量化比例尺。
d3.scaleQuantile() − 構造一個分位數比例尺，其中輸入樣本資料對映到離散輸出範圍。
d3.scaleThreshold() − 構造一個比例尺，其中任意輸入資料對映到離散輸出範圍。
d3.scaleBand() − 帶狀比例尺類似於序數比例尺，但輸出範圍是連續的且為數字。
d3.scalePoint() − 構造一個點比例尺。
d3.scaleOrdinal() − 構造一個序數比例尺，其中輸入資料包含字母並對映到離散的數字輸出範圍。
在進行工作示例之前，讓我們首先了解以下兩個術語：
域 − 域表示輸入資料的最小值和最大值。
範圍 − 範圍是輸出範圍，我們希望輸入值對映到…
工作示例
讓我們在此示例中執行 d3.scaleLinear 函式。為此，您需要遵循以下步驟：
步驟 1 − 定義變數 − 使用以下程式碼定義 SVG 變數和資料。
var data = [100, 200, 300, 400, 800, 0]
var width = 500,
barHeight = 20,
margin = 1;
步驟 2 − 建立線性比例尺 − 使用以下程式碼建立線性比例尺。
var scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]);
在這裡，對於我們的域的手動最小值和最大值，我們可以使用內建的 d3.min() 和 d3.max() 函式，它們將分別從我們的資料陣列中返回最小值和最大值。
步驟 3 − 附加 SVG 屬性 − 使用以下程式碼附加 SVG 元素。
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
步驟 4 − 應用轉換 − 使用以下程式碼應用轉換。
var g = svg.selectAll("g")
.data(data).enter().append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
步驟 5 − 附加矩形元素 − 如以下所示，將矩形元素附加到縮放。
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("height", barHeight - margin)
步驟 6 − 顯示資料 − 現在使用以下程式碼顯示資料。
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function (d) { return d; });
步驟 7 − 工作示例 − 現在，讓我們使用 d3.scaleLinear() 函式建立條形圖，如下所示。
建立一個網頁“scales.html”並對其進行以下更改。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var data = [100, 200, 300, 350, 400, 250]
var width = 500, barHeight = 20, margin = 1;
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
g.append("rect")
.attr("width", function (d) {
return scale(d);
})
.attr("height", barHeight - margin)
g.append("text")
.attr("x", function (d) { return (scale(d)); })
.attr("y", barHeight / 2).attr("dy", ".35em")
.text(function (d) { return d; });
</script>
</body>
</html>
以上程式碼將在瀏覽器中顯示以下結果。
D3.js - 軸 API
D3 提供繪製軸的函式。軸由線、刻度和標籤組成。軸使用比例尺，因此每個軸都需要指定一個比例尺才能使用。
配置軸 API
您可以使用以下指令碼配置 API。
<script src = "https://d3js.org/d3-axis.v1.min.js"></script> <script> </script>
軸 API 方法
D3 提供以下重要函式來繪製軸。它們簡要描述如下。
d3.axisTop() − 此方法用於建立頂部水平軸。
d3.axisRight() − 此方法用於建立垂直右側軸。
d3.axisBottom() − 此方法用於建立底部水平軸。
d3.axisLeft() − 它建立左側垂直軸。
工作示例
讓我們學習如何向圖形新增 x 軸和 y 軸。為此，我們需要遵循以下步驟。
步驟 1 − 定義變數 − 使用以下程式碼定義 SVG 和資料變數。
var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
步驟 2 − 建立線性比例尺函式 − 為 x 軸和 y 軸建立線性比例尺函式，如下所示。
var xscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([0, width - 100]); var yscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height/2, 0]);
在這裡，我們建立了一個線性比例尺並指定了域和範圍。
步驟 3 − 將比例尺新增到 x 軸 − 現在，我們可以使用以下程式碼將比例尺新增到 x 軸。
var x_axis = d3.axisBottom() .scale(xscale);
在這裡，我們使用 d3.axisBottom 建立 x 軸併為其提供之前定義的比例尺。
步驟 4 − 將比例尺新增到 y 軸 − 使用以下程式碼將比例尺新增到 y 軸。
var y_axis = d3.axisLeft() .scale(yscale);
在這裡，我們使用 d3.axisLeft 建立 y 軸併為其提供我們上面定義的比例尺。
步驟 5 − 應用轉換 − 您可以附加一個組元素並插入 x、y 軸，如下所示。
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
步驟 6 − 附加組元素 − 使用以下程式碼應用轉換和組元素。
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)
步驟 7 − 工作示例 − 完整的程式碼清單在以下程式碼塊中給出。建立一個網頁 axes.html 並對其進行以下更改。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg text {
fill: purple;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var width = 400, height = 400;
var data = [100, 120, 140, 160, 180, 200];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width - 100]);
var yscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height/2, 0]);
var x_axis = d3.axisBottom().scale(xscale);
var y_axis = d3.axisLeft().scale(yscale);
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下更改。
D3.js - 形狀 API
本章討論了 D3.js 中的不同形狀生成器。
配置 API
您可以使用以下指令碼配置形狀 API。
<script src = "https://d3js.org/d3-path.v1.min.js"></script> <script src = "https://d3js.org/d3-shape.v1.min.js"></script> <script> </script>
形狀生成器
D3.js 支援不同的形狀。讓我們詳細瞭解一下突出的形狀。
弧形 API
弧形生成器生成圓形或環形形狀。我們在之前的餅圖章節中使用了這些 API 方法。讓我們詳細瞭解各種弧形 API 方法。
d3.arc() − 此方法用於建立一個新的弧形生成器。
arc(args) − 它用於使用指定的給定引數生成弧形。下面定義了具有物件半徑和角度的預設設定。
<script>
var arc = d3.arc();
arc({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2
});
</script>
arc.centroid(args) − 此方法用於計算使用指定引數的弧形中心線的中間點 [x, y]。
arc.innerRadius([radius]) − 此方法用於從給定半徑設定內半徑並返回弧形生成器。定義如下：
function innerRadius(d) {
return d.innerRadius;
}
arc.outerRadius([radius]) − 此方法用於從給定半徑設定外半徑並返回弧形生成器。定義如下。
function outerRadius(d) {
return d.outerRadius;
}
arc.cornerRadius([radius]) − 此方法用於從給定半徑設定圓角半徑並返回弧形生成器。定義如下。
function cornerRadius() {
return 0;
}
如果圓角半徑大於零，則弧形的角將使用給定半徑的圓圈進行圓角處理。圓角半徑不能大於 (outerRadius - innerRadius) / 2。
arc.startAngle([angle]) − 此方法用於將起始角度從給定角度設定為函式。定義如下：
function startAngle(d) {
return d.startAngle;
}
arc.endAngle([angle]) − 此方法用於將結束角度從給定角度設定為函式。定義如下。
function endAngle(d) {
return d.endAngle;
}
arc.padAngle([angle]) − 此方法用於將填充角度從給定角度設定為函式。定義如下。
function padAngle() {
return d && d.padAngle;
}
(x) arc.padRadius([radius]) − 此方法用於將填充半徑從給定半徑設定為指定的函式。填充半徑確定相鄰弧形之間的固定線性距離，定義為 padRadius *padAngle。
(xi) arc.context([context]) − 此方法用於設定上下文並返回弧形生成器。
餅圖 API
此 API 用於建立餅圖生成器。我們在上一章中執行了這些 API 方法。我們將詳細討論所有這些方法。
d3.pie() − 使用預設設定構造一個新的餅圖生成器。
pie(data[, arguments]) − 此方法用於為給定的陣列值生成餅圖。它返回一個物件陣列。物件是資料點的弧形角度。每個物件具有以下屬性：
data − 輸入資料；輸入資料陣列中的相應元素。
value − 弧形的數值。
index − 弧形的索引。
startAngle − 弧形的起始角度。
endAngle − 弧形的結束角度。
padAngle − 弧形的填充角度。
pie.value([value]) − 此方法用於將值設定為指定的函式並生成餅圖。定義如下：
function value(d) {
return d;
}
pie.sort([compare]) − 此方法用於將資料排序到指定的函式並生成餅圖。比較函式定義如下。
pie.sort(function(a, b)
{ return a.name.localeCompare(b.name); }
);
在這裡，比較函式接受兩個引數“a”和“b”，每個引數都是輸入資料陣列中的元素。如果“a”的弧形應該在“b”的弧形之前，則比較器必須返回一個小於零的數字。如果“a”的弧形應該在“b”的弧形之後，則比較器必須返回一個大於零的數字。
pie.sortValues([compare]) − 此方法用於比較給定函式的值並生成餅圖。函式定義如下。
function compare(a, b) {
return b - a;
}
pie.startAngle([angle]) − 此方法用於將餅圖的起始角度設定為指定的函式。如果未指定角度，則返回當前起始角度。定義如下。
function startAngle() {
return 0;
}
pie.endAngle([angle]) − 此方法用於將餅圖的結束角度設定為指定的函式。如果未指定角度，則返回當前結束角度。定義如下。
function endAngle() {
return 2 * Math.PI;
}
pie.padAngle([angle]) − 此方法用於將填充角度設定為指定的函式並生成餅圖。函式定義如下。
function padAngle() {
return 0;
}
線條 API
線條 API 用於生成線條。我們在**圖形**章節中使用了這些 API 方法。讓我們詳細瞭解每個方法。
d3.line() − 此方法用於建立一個新的線條生成器。
line(data) − 此方法用於為給定的資料陣列生成線條。
line.x([x]) − 此方法用於將 x 訪問器設定為指定的函式並生成線條。函式定義如下：
function x(d) {
return d[0];
}
line.y([y]) − 此方法用於將“y”訪問器設定為指定的函式並生成線條。函式定義如下。
function y(d) {
return d[1];
}
line.defined([defined]) − 此方法用於將定義訪問器設定為指定的函式。定義如下。
function defined() {
return true;
}
line.curve([curve]) − 用於設定曲線並生成線條。
line.context([context]) − 此方法用於設定上下文並生成線條。如果未指定上下文，則返回 null。
d3.lineRadial() − 此方法用於建立新的徑向線；它等效於笛卡爾線生成器。
lineRadial.radius([radius]) − 此方法用於繪製徑向線，訪問器返回半徑。它取自原點 (0,0) 的距離。
在下一章中，我們將學習 D3.js 中的顏色 API。
D3.js - 顏色 API
顏色透過組合紅色、綠色和藍色來顯示。顏色可以透過以下幾種不同的方式指定：
- 透過顏色名稱
- 作為 RGB 值
- 作為十六進位制值
- 作為 HSL 值
- 作為 HWB 值
d3-color API 提供了各種顏色的表示形式。您可以在 API 中執行轉換和操作操作。讓我們詳細瞭解這些操作。
配置 API
您可以使用以下指令碼直接載入 API。
<script src = "https://d3js.org/d3-color.v1.min.js"></script> <script> </script>
基本操作
讓我們一起了解 D3 中的基本顏色操作。
將顏色值轉換為 HSL − 要將顏色值轉換為 HSL，請使用以下**示例**：
var convert = d3.hsl("green");
您可以將色相旋轉 45°，如下所示。
convert.h + = 45;
同樣，您也可以更改飽和度級別。要淡化顏色值，您可以更改不透明度值，如下所示。
convert.opacity = 0.5;
顏色 API 方法
以下是一些最重要的顏色 API 方法。
- d3.color(specifier)
- color.opacity
- color.rgb()
- color.toString()
- color.displayable()
- d3.rgb(color)
- d3.hsl(color)
- d3.lab(color)
- d3.hcl(color)
- d3.cubehelix(color)
讓我們詳細瞭解每個顏色 API 方法。
d3.color(specifier)
它用於解析指定的 CSS 顏色並返回 RGB 或 HSL 顏色。如果未給出 specifier，則返回 null。
**示例** - 讓我們考慮以下示例。
<script>
var color = d3.color("green"); // asign color name directly
console.log(color);
</script>
我們將在螢幕上看到以下響應：
{r: 0, g: 128, b: 0, opacity: 1}
color.opacity
如果我們想淡化顏色，我們可以更改不透明度值。它在 [0, 1] 範圍內。
**示例** - 讓我們考慮以下示例。
<script>
var color = d3.color("green");
console.log(color.opacity);
</script>
我們將在螢幕上看到以下響應：
1
color.rgb()
它返回顏色的 RGB 值。讓我們考慮以下示例。
<script>
var color = d3.color("green");
console.log(color.rgb());
</script>
我們將在螢幕上看到以下響應。
{r: 0, g: 128, b: 0, opacity: 1}
color.toString()
它根據 CSS 物件模型規範返回表示顏色的字串。讓我們考慮以下示例。
<script>
var color = d3.color("green");
console.log(color.toString());
</script>
我們將在螢幕上看到以下響應。
rgb(0, 128, 0)
color.displayable()
如果顏色可顯示，則返回 true。如果 RGB 顏色值小於 0 或大於 255，或者不透明度不在 [0, 1] 範圍內，則返回 false。讓我們考慮以下示例。
<script>
var color = d3.color("green");
console.log(color.displayable());
</script>
我們將在螢幕上看到以下響應。
true
d3.rgb(color)
此方法用於構造新的 RGB 顏色。讓我們考慮以下示例。
<script>
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
</script>
我們將在螢幕上看到以下響應。
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}
d3.hsl(color)
它用於構造新的 HSL 顏色。值作為返回例項上的 h、s 和 l 屬性公開。讓我們考慮以下示例。
<script>
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
</script>
我們將在螢幕上看到以下響應。
330 0.5
d3.lab(color)
它構造新的 Lab 顏色。通道值作為返回例項上的“l”、“a”和“b”屬性公開。
<script>
var lab = d3.lab("blue");
console.log(lab);
</script>
我們將在螢幕上看到以下響應。
{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}
d3.hcl(color)
構造新的 HCL 顏色。通道值作為返回例項上的 h、c 和 l 屬性公開。讓我們考慮以下示例。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>
我們將在螢幕上看到以下響應。
{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}
d3.cubehelix(color)
構造新的 Cubehelix 顏色。值作為返回例項上的 h、s 和 l 屬性公開。讓我們考慮以下示例。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>
我們將在螢幕上看到以下響應：
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}
工作示例
讓我們建立一個新的網頁 - **color.html** 來執行所有顏色 API 方法。完整的程式碼清單定義如下。
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>D3 colors API</h3>
<script>
var color = d3.color("green");
console.log(color);
console.log(color.opacity);
console.log(color.rgb());
console.log(color.toString());
console.log(color.displayable());
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
var lab = d3.lab("blue");
console.log(lab);
var hcl = d3.hcl("blue");
console.log(hcl);
var cube = d3.cubehelix("blue");
console.log(cube);
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
D3.js - 過渡 API
D3 轉換獲取元素的選擇，並對每個元素應用轉換到元素當前定義的一部分。
配置 API
您可以使用以下指令碼配置轉換 API。
<script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-ease.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script src = "https://d3js.org/d3-transition.v1.min.js"></script> <script> </script>
轉換 API 方法
讓我們詳細瞭解轉換 API 方法。
選擇元素
讓我們詳細討論各種選擇元素。
selection.transition([name]) − 此方法用於返回具有名稱的新選擇轉換。如果未指定名稱，則返回 null。
selection.interrupt([name]) − 此方法用於中斷具有名稱的選擇元素的轉換，定義如下。
selection.interrupt().selectAll("*").interrupt();
d3.interrupt(node[, name]) − 此方法用於中斷指定節點上指定名稱的轉換。
d3.transition([name]) − 此方法用於返回具有指定名稱的新轉換。
transition.select(selector) − 此方法用於選擇與指定選擇器匹配的第一個元素，並返回對結果選擇進行轉換，定義如下。
transition .selection() .select(selector) .transition(transition)
transition.selectAll(selector) − 此方法用於選擇與指定選擇器匹配的所有元素，並返回對結果選擇進行轉換。定義如下：
transition .selection() .selectAll(selector) .transition(transition)
transition.filter(filter) − 此方法用於選擇與指定過濾器匹配的元素，定義如下。
transition .selection() .filter(filter) .transition(transition)
transition.merge(other) − 此方法用於將轉換與其他轉換合併。定義如下。
transition .selection() .merge(other.selection()) .transition(transition)
transition.transition() − 此方法用於返回對所選元素的新轉換。它計劃在轉換停止時開始。新轉換繼承此轉換的名稱、持續時間和緩動。
**示例** - 讓我們考慮以下示例。
d3.selectAll(".body")
.transition()
// fade to yellow.
.style("fill", "yellow")
.transition()
// Wait for five second. Then change blue, and remove.
.delay(5000)
.style("fill", "blue")
.remove();
在這裡，主體淡化為黃色，並在最後一次轉換開始前五秒鐘開始。
d3.active(node[, name]) − 此方法用於返回指定節點上具有名稱的轉換。
計時方法
讓我們詳細瞭解轉換計時 API 方法。
transition.delay([value]) − 此方法用於將轉換延遲設定為指定值。如果為每個選定元素計算函式，則將其傳遞給當前資料“d”和索引“i”，上下文為當前 DOM 元素。如果未指定值，則返回轉換中第一個（非空）元素的延遲的當前值。定義如下：
transition.delay(function(d, i) { return i * 10; });
transition.duration([value]) − 此方法用於將轉換持續時間設定為指定值。如果未指定值，則返回轉換中第一個（非空）元素的持續時間的當前值。
transition.ease([value]) − 此方法用於為選定元素緩動轉換值。緩動函式在動畫的每一幀呼叫，並傳遞 [0, 1] 範圍內的歸一化時間“t”。如果未指定值，則返回轉換中第一個（非空）元素的當前緩動函式。
在下一章中，我們將討論 d3.js 中的拖放概念。
D3.js - 拖拽 API
拖放是 d3.js 中最熟悉的概念之一。本章詳細解釋了拖動及其方法。
安裝
我們可以使用以下指令碼直接包含拖動 API。
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-drag.v1.min.js"></script>
拖動 API 方法
以下是 D3.js 中一些最重要的拖動 API 方法。
- d3.drag()
- drag(selection)
- drag.container([container])
- drag.filter([filter])
- drag.subject([subject])
- drag.clickDistance([distance])
- drag.on(typenames, [listener])
- d3.dragDisable(window)
- d3.dragEnable(window[, noclick])
現在讓我們詳細瞭解每個方法。
d3.drag()
此方法用於建立一個新的拖動。您可以使用以下指令碼呼叫此方法。
<script> var drag = d3.drag(); </script>
drag(selection)
此方法用於將拖動應用於指定的選擇。您可以使用**selection.call**呼叫此函式。一個簡單的示例定義如下。
d3.select(".node").call(d3.drag().on("drag", mousemove));
在這裡，應用於所選元素的拖動行為透過 selection.call 實現。
drag.container([container])
它用於將容器設定為用於拖動的指定函式。如果未指定容器，則返回當前訪問器。要拖動帶有畫布的任何圖形元素，您可以將容器重新定義為自身。定義如下。
function container() {
return this;
}
drag.filter([filter])
它用於將過濾器設定為指定的函式。如果未指定過濾器，則返回當前過濾器，定義如下。
function filter() {
return !d3.event.button;
}
drag.subject([subject])
它用於將主體設定為用於拖動的指定函式，定義如下。
function subject(d) {
return d = = null ? {x: d3.event.x, y: d3.event.y} : d;
}
在這裡，主體表示正在拖動的事物。例如，如果要拖動 SVG 中的矩形元素，則預設主體是正在拖動的矩形的資料。
drag.clickDistance([distance])
此方法用於設定 mousedown 和 mouseup 事件的點選最大距離。如果未指定距離，則指向零。
drag.on(typenames, [listener])
此方法用於為拖動的指定 typenames 設定事件監聽器。typenames 是一個字串，包含一個或多個用空格分隔的 typename。每個 typename 都是一個型別，後面可選地跟著一個點 (.) 和一個名稱，例如 drag.one 和 drag.two。此型別應來自以下之一：
start − 啟動一個新的指標。
drag − 拖動活動指標。
end − 使活動指標失效。
d3.dragDisable(window)
此方法用於停用拖放選擇。它阻止 mousedown 事件操作。大多數選定的瀏覽器預設支援此操作。如果不支援，您可以將 CSS 屬性設定為 none。
d3.dragEnable(window[, noclick])
此方法用於在指定的視窗位置啟用拖放選擇。它用於呼叫 mouseup 事件操作。如果將 noclick 值設定為 true，則單擊事件將在零毫秒超時後失效。
拖拽 API - 拖拽事件
D3.event 方法用於設定拖拽事件。它包含以下欄位：
Target - 它表示拖拽行為。
Type - 它是一個字串，可以是以下任意一個：“start”、“drag” 或 “end”。
Subject - 拖拽主體，由 drag.subject 定義。
event.on(typenames, [listener])
事件物件公開了 event.on 方法來執行拖拽操作。其定義如下。
d3.event.on("drag", dragged).on("end", ended);
D3.js - 縮放 API
縮放有助於調整內容的大小。您可以使用點選並拖拽的方式聚焦於特定區域。在本章中，我們將詳細討論縮放 API。
配置 API
您可以使用以下指令碼直接從 “d3js.org” 載入縮放 API。
<script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-dispatch.v1.min.js"></script> <script src = "https://d3js.org/d3-ease.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-selection.v1.min.js"></script> <script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script src = "https://d3js.org/d3-transition.v1.min.js"></script> <script src = "https://d3js.org/d3-drag.v1.min.js"></script> <script src = "https://d3js.org/d3-zoom.v1.min.js"></script> <body> <script> </script> </body>
縮放 API 方法
以下是縮放 API 中一些最常用的方法。
- d3.zoom()
- zoom(selection)
- zoom.transform(selection, transform)
- zoom.translateBy(selection, x, y)
- zoom.translateTo(selection, x, y)
- zoom.scaleTo(selection, k)
- zoom.scaleBy(selection, k)
- zoom.filter([filter])
- zoom.wheelDelta([delta])
- zoom.extent([extent])
- zoom.scaleExtent([extent])
- zoom.translateExtent([extent])
- zoom.clickDistance([distance])
- zoom.duration([duration])
- zoom.interpolate([interpolate])
- zoom.on(typenames[, listener])
讓我們簡要了解一下所有這些縮放 API 方法。
d3.zoom()
它建立一個新的縮放行為。我們可以使用下面的指令碼訪問它。
<script> var zoom = d3.zoom(); </script>
zoom(selection)
它用於對選定的元素應用縮放轉換。例如，您可以使用以下語法例項化 mousedown.zoom 行為。
selection.call(d3.zoom().on("mousedown.zoom", mousedowned));
zoom.transform(selection, transform)
它用於將所選元素的當前縮放轉換設定為指定的轉換。例如，我們可以使用以下語法將縮放轉換重置為單位轉換。
selection.call(zoom.transform, d3.zoomIdentity);
我們也可以使用以下語法將縮放轉換重置為持續 1000 毫秒的單位轉換。
selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);
zoom.translateBy(selection, x, y)
它用於透過 x 和 y 值平移所選元素的當前縮放轉換。您可以將 x 和 y 平移值指定為數字或返回數字的函式。如果為所選元素呼叫函式，則會通過當前資料 'd' 和 DOM 的索引 'i' 傳遞該函式。下面定義了一個示例程式碼。
zoom.translateBy(selection, x, y) {
zoom.transform(selection, function() {
return constrain(this.__zoom.translate(
x = = = "function" ? x.apply(this, arguments) : x,
y = = = "function" ? y.apply(this, arguments) : y
);
}
};
zoom.translateTo(selection, x, y)
它用於將所選元素的當前縮放轉換平移到指定的 x 和 y 位置。
zoom.scaleTo(selection, k)
它用於將所選元素的當前縮放轉換縮放為k。這裡，k 是一個縮放因子，指定為數字或函式。
zoom.scaleTo = function(selection, k) {
zoom.transform(selection, function() {
k = = = "function" ? k.apply(this, arguments) : k;
});
};
zoom.scaleBy(selection, k)
它用於將所選元素的當前縮放轉換縮放k倍。這裡，k 是一個縮放因子，指定為數字或返回數字的函式。
zoom.scaleBy = function(selection, k) {
zoom.scaleTo(selection, function() {
var k0 = this.__zoom.k,
k1 = k = = = "function" ? k.apply(this, arguments) : k;
return k0 * k1;
});
};
zoom.filter([filter])
它用於為縮放行為設定指定的函式作為過濾器。如果未指定過濾器，則它將返回當前過濾器，如下所示。
function filter() {
return !d3.event.button;
}
zoom.wheelDelta([delta])
Δ 的值由滾輪增量函式返回。如果未指定 delta，則它將返回當前滾輪增量函式。
zoom.extent([extent])
它用於將範圍設定為指定的陣列點。如果未指定範圍，則它將返回當前範圍訪問器，預設為 [[0, 0], [width, height]]，其中 width 是元素的客戶端寬度，height 是其客戶端高度。
zoom.scaleExtent([extent])
它用於將縮放範圍設定為指定的數字陣列 [k0, k1]。這裡，k0 是最小允許的縮放因子。而 k1 是最大允許的縮放因子。如果未指定範圍，則它將返回當前縮放範圍，預設為 [0, ∞]。考慮下面定義的示例程式碼。
selection
.call(zoom)
.on("wheel", function() { d3.event.preventDefault(); });
當用戶已經處於縮放範圍的相應限制時，可以透過滾輪嘗試縮放。如果我們希望無論縮放範圍如何都阻止在滾輪輸入時滾動，請註冊一個滾輪事件監聽器以阻止瀏覽器的預設行為。
zoom.translateExtent([extent])
如果指定了範圍，則它將平移範圍設定為指定的陣列點。如果未指定範圍，則它將返回當前平移範圍，預設為 [[-∞, -∞], [+∞, +∞]]。
zoom.clickDistance([distance])
此方法用於設定可縮放區域在上下移動之間的最大距離，這將觸發後續的單擊事件。
zoom.duration([duration])
此方法用於將雙擊和雙點觸控縮放轉換的持續時間設定為指定的毫秒數，並返回縮放行為。如果未指定持續時間，則它將返回當前持續時間，預設為 250 毫秒，如下所示。
selection
.call(zoom)
.on("dblclick.zoom", null);
zoom.interpolate([interpolate])
此方法用於將縮放轉換的插值設定為指定的函式。如果未指定插值，則它將返回當前插值工廠，預設為 d3.interpolateZoom。
zoom.on(typenames[, listener])
如果指定了監聽器，則它將為指定的型別名稱設定事件監聽器並返回縮放行為。typenames 是一個包含一個或多個由空格分隔的型別名稱的字串。每個型別名稱都是一個型別，後面可以選擇跟一個句點 (.) 和一個名稱，例如 zoom.one 和 zoom.second。名稱允許為同一型別註冊多個監聽器。此型別必須來自以下型別之一：
Start - 縮放開始後（例如在 mousedown 時）。
Zoom - 縮放轉換髮生更改後（例如在 mousemove 時）。
End - 縮放結束後（例如在 mouseup 時）。
在下一章中，我們將討論 D3.js 中的不同請求 API。
D3.js - 請求 API
D3.js 提供了一個請求 API 來執行 XMLHttpRequest。本章詳細解釋了各種請求 API。
XMLHttpRequest
XMLHttpRequest 是內建的 http 客戶端，用於模擬瀏覽器 XMLHttpRequest 物件。它可以與為瀏覽器設計的 JS 一起使用，以提高程式碼的重用性並允許使用現有的庫。
您可以將模組包含在您的專案中，並像下面解釋的那樣使用基於瀏覽器的 XHR 物件。
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
它支援非同步和同步請求，並執行 GET、POST、PUT 和 DELETE 請求。
配置請求
您可以使用以下指令碼直接從 “d3js.org” 載入。
<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
d3.json("/path/to/sample.json", callback);
</script>
這裡，請求 API 內建支援解析 JSON、CSV 和 TSV。您可以透過直接使用請求或文字來解析其他格式。
載入文字檔案
要載入文字檔案，請使用以下語法。
d3.text("/path/to/sample.txt", function(error, text) {
if (error) throw error;
console.log(text);
});
解析 CSV 檔案
要載入和解析 CSV 檔案，請使用以下語法。
d3.csv("/path/to/sample.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
類似地，您也可以載入 JSON 和 TSV 檔案。
工作示例
讓我們來看一個關於如何載入和解析 CSV 檔案的簡單示例。在此之前，您需要在 d3 應用程式資料夾中建立一個名為 “sample.csv” 的 CSV 檔案，如下所示。
Num1,Num2 1,2 3,4 5,6 7,8 9,10
現在，使用以下指令碼建立一個網頁 “requests.html”。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> D3.js Requests API </h3>
<script>
d3.csv("sample.csv", function(data) {
console.log(data);
});
</script>
</body>
</html>
現在，請求瀏覽器，您將看到以下響應：
請求 API 方法
以下是請求 API 中一些最常用的方法。
- d3.request(url[, callback])
- request.header(name[, value])
- request.mimeType([type])
- request.user([value])
- request.password([value])
- request.timeout([timeout])
- request.get([data])
- request.post([data])
- request.send(method[, data])
- request.abort()
- d3.csv(url[[, row], callback])
現在讓我們簡要討論一下每個方法。
d3.request(url[, callback])
它為給定的 URL 返回一個新的請求。如果分配了回撥函式，則將其視為正在呼叫的請求，否則請求尚未被呼叫。其定義如下。
d3.request(url) .get(callback);
您可以使用以下語法釋出一些查詢引數。
d3.request("/path/to/resource")
.header("X-Requested-With", "XMLHttpRequest")
.header("Content-Type", "application/x-www-form-urlencoded")
.post("a = 2&b = 3", callback);
如果您希望指定請求標頭或 MIME 型別，則不得為建構函式指定回撥函式。
request.header(name[, value])
它用於將值設定為具有指定名稱的請求標頭。如果未指定值，則它將刪除具有指定名稱的請求標頭。其定義如下。
d3.request(url)
.header("Accept-Language", "en-US")
.header("X-Requested-With", "XMLHttpRequest")
.get(callback);
這裡，X-Requested-With 標頭到 XMLHttpRequest 是一個預設請求。
request.mimeType([type])
它用於將 MIME 型別分配給給定的值。其定義如下。
d3.request(url)
.mimeType("text/csv")
.get(callback);
request.user([value])
它用於為身份驗證分配使用者名稱。如果未指定使用者名稱，則預設為 null。
request.password([value])
如果指定了值，則它將為身份驗證設定密碼。
request.timeout([timeout])
如果指定了超時時間，則它將超時時間設定為指定的毫秒數。
request.get([data])
此方法用於使用 GET 方法傳送請求。其定義如下。
request.send("GET", data, callback);
request.post([data])
此方法用於使用 POST 方法傳送請求。其定義如下。
request.send("POST", data, callback);
request.send(method[, data])
此方法用於使用給定的 GET 或 POST 方法傳送請求。
request.abort()
此方法用於中止請求。
d3.csv(url[[, row], callback])
返回對指定 URL 上的 CSV 檔案的新請求，並使用預設 MIME 型別 text/csv。以下語法顯示了沒有回撥函式的情況。
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); });
如果您使用 POST 方法指定回撥函式，則其定義如下。
d3.request(url)
.mimeType("text/csv")
.response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
.post(callback);
示例
在您的 d3 應用程式根資料夾目錄中建立一個名為 “lang.csv” 的 csv 檔案，並對其進行以下更改。
Year,Language,Author 1972,C,Dennis Ritchie 1995,Java,James gosling 2011,D3 js,Mike Bostock
建立一個網頁 “csv.html” 並向其中新增以下指令碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> D3.js request API</h3>
<script>
d3.csv("lang.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
language: d.Language,
author: d.Author,
};
}, function(error, rows) {
console.log(error);
console.log(rows[0].year);
});
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
D3.js - 分隔符分隔值 API
分隔符是由一個或多個字元組成的序列，用於在純文字或其他資料中的獨立區域之間指定邊界。欄位分隔符是由逗號分隔的值的序列。嗯，分隔符分隔值是逗號分隔值 (CSV) 或製表符分隔值 (TSV)。本章詳細解釋了分隔符分隔值。
配置 API
我們可以使用以下語法輕鬆載入 API。
<script src = "https://d3js.org/d3-dsv.v1.min.js"></script> <script> var data = d3.csvParse(string); </script>
API 方法
以下是分隔符分隔值的各種 API 方法。
- d3.csvParse(string[, row])
- d3.csvParseRows(string[, row])
- d3.csvFormat(rows[, columns])
- d3.csvFormatRows(rows)
- d3.tsvParse(string[, row])
- d3.tsvParseRows(string[, row])
- d3.tsvFormat(rows[, columns])
- d3.tsvFormatRows(rows)
讓我們詳細瞭解一下每個 API 方法。
d3.csvParse(string[, row])
此方法用於解析 csv 格式。考慮下面顯示的檔案data.csv。
year,population 2006,40 2008,45 2010,48 2012,51 2014,53 2016,57 2017,62
現在，我們可以應用上面給出的函式。
**示例** - 讓我們考慮以下示例。
var data = d3.csvParse(string, function(d) {
return {
year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
population: d.population
};
});
這裡，它解析以分隔符分隔的值指定的字串。它返回一個表示已解析行的物件的陣列。
d3.csvParseRows(string[, row])
此方法用於解析等效於行的 csv 格式。
var data = d3.csvParseRows(string, function(d, i) {
return {
year: new Date(+d[0], 0, 1), // convert first colum column to Date
population: d[1],
};
});
它解析 csv 檔案中的每一行。
d3.csvFormat(rows[, columns])
此方法用於格式化 csv 行和列。
**示例** - 讓我們考慮以下示例。
var string = d3.csvFormat(data, ["year", "population"]);
這裡，如果未指定列，則形成標題行的列名稱列表由行中所有物件上的所有屬性的並集確定。如果指定了列，則它是一個表示列名稱的字串陣列。
d3.csvFormatRows(rows)
此方法用於格式化 csv 行。
**示例** - 讓我們考慮以下示例。
var string = d3.csvFormatRows(data.map(function(d, i) {
return [
d.year.getFullYear(), // Assuming d.year is a Date object.
d.population
];
}));
此處，它將指定的字串行陣列格式化為分隔符分隔的值，並返回一個字串。
d3.tsvParse(string[, row])
此方法用於解析 tsv 格式。它類似於 csvParse。
d3.tsvParseRows(string[, row])
此方法用於解析等效於行的 tsv 格式。它類似於 csvParseRows 函式。
d3.tsvFormat(rows[, columns])
此方法用於格式化 tsv 行和列。
d3.tsvFormatRows(rows)
此方法用於格式化 tsv 行。
D3.js - 定時器 API
Timer API 模組用於執行具有同步定時延遲的並發動畫。它使用requestAnimationFrame進行動畫。本章詳細解釋了 Timer API 模組。
requestAnimationFrame
此方法告訴瀏覽器您希望執行動畫，並請求瀏覽器呼叫指定函式來更新動畫。
配置計時器
我們可以使用以下指令碼輕鬆地從 d3js.org 直接載入計時器。
<script src = "https://d3js.org/d3-timer.v1.min.js"></script> <script> var timer = d3.timer(callback); </script>
Timer API 方法
Timer API 支援以下重要方法。所有這些將在下面詳細解釋。
d3.now()
此方法返回當前時間。
d3.timer(callback[, delay[, time]])
此方法用於安排新的計時器，並在停止之前呼叫計時器。您可以設定以毫秒為單位的數字延遲，但它是可選的，否則預設為零。如果未指定時間，則將其視為 d3.now()。
timer.restart(callback[, delay[, time]])
使用指定的回撥以及可選的延遲和時間重新啟動計時器。
timer.stop()
此方法停止計時器，防止後續回撥。
d3.timeout(callback[, delay[, time]])
它用於在第一次回撥時停止計時器。回撥作為經過時間傳遞。
d3.interval(callback[, delay[, time]])
它在特定的時間延遲間隔內被呼叫。如果未指定延遲，則採用計時器時間。
示例
建立一個網頁“timer.html”並向其中新增以下指令碼。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3> Timer API </h3>
<script>
var timer = d3.timer(function(duration) {
console.log(duration);
if (duration > 150) timer.stop();
}, 100);
</script>
</body>
</html>
我們將在螢幕上看到以下響應。
D3.js - 工作示例
讓我們在本章中執行一個動畫條形圖。對於此示例，我們採用上一章中使用的 population records 的 data.csv 檔案作為資料集，並生成一個動畫條形圖。
為此，我們需要執行以下步驟：
步驟 1 − 應用樣式 − 使用下面給出的程式碼應用 CSS 樣式。
<style>
.bar {
fill: green;
}
.highlight {
fill: red;
}
.title {
fill: blue;
font-weight: bold;
}
</style>
步驟 2 − 定義變數 − 讓我們使用下面的指令碼定義 SVG 屬性。
<script>
var svg = d3.select("svg"), margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
</script>
步驟 3 − 追加文字 − 現在，追加文字並使用下面的程式碼應用轉換。
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50)
.attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
步驟 4 − 建立比例範圍 − 在此步驟中，我們可以建立一個比例範圍並追加組元素。它定義如下。
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear()
.range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
步驟 5 − 讀取資料 − 我們已經在之前的示例中建立了data.csv檔案。我們在這裡使用了相同的檔案。
year,population 2006,40 2008,45 2010,48 2012,51 2014,53 2016,57 2017,62
現在，使用下面的程式碼讀取以上檔案。
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
步驟 6 − 設定域 − 現在，使用下面的程式碼設定域。
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
步驟 7 − 新增 X 軸 − 現在，您可以將 X 軸新增到轉換中。如下所示。
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x)).append("text")
.attr("y", height - 250).attr("x", width - 100)
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("year");
步驟 8 − 新增 Y 軸 − 使用下面給出的程式碼將 Y 軸新增到轉換中。
g.append("g")
.append("text").attr("transform", "rotate(-90)")
.attr("y", 6).attr("dy", "-5.1em")
.attr("text-anchor", "end").attr("font-size", "18px")
.attr("stroke", "blue").text("population");
步驟 9 − 追加組元素 − 現在，追加組元素並按如下定義對 Y 軸應用轉換。
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
步驟 10 − 選擇 bar 類 − 現在，選擇 bar 類中的所有元素，如下所示。
g.selectAll(".bar")
.data(data).enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth())
.transition()
.ease(d3.easeLinear)
.duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
在這裡，我們為 mouseout 和 mouseover 添加了監聽器事件以執行動畫。當滑鼠懸停在特定條形上並移出時，它會應用動畫。這些函式將在後續步驟中解釋。
.ease(d3.easeLinear)函式用於在動畫中執行明顯的運動。它以 200 的持續時間處理緩慢進入和緩慢移出的運動。延遲可以使用以下公式計算：
.delay(function (d, i) {
return i * 25;
})
步驟 11 − 滑鼠懸停事件處理程式函式 − 讓我們建立一個滑鼠懸停事件處理程式來處理滑鼠事件，如下所示。
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
在這裡，在滑鼠懸停事件中，我們希望增加所選條形的條形寬度和高度，以及條形顏色為紅色。對於顏色，我們添加了一個“highlight”類，它將所選條形的顏色更改為紅色。
對條形進行持續時間為 200 毫秒的轉換函式。當我們將條形的寬度增加 5px，高度增加 10px 時，從條形的先前寬度和高度到新的寬度和高度的轉換將持續 200 毫秒。
接下來，我們為條形計算了一個新的“y”值，以便條形不會因新的高度值而變形。
步驟 12 − 滑鼠移出事件處理程式函式 − 讓我們建立一個滑鼠移出事件處理程式來處理滑鼠事件。它定義如下。
function onMouseOut(d, i) {
d3.select(this).attr('class', 'bar');
d3.select(this)
.transition()
.duration(400).attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
d3.selectAll('.val')
.remove()
}
在這裡，在滑鼠移出事件中，我們希望刪除我們在滑鼠懸停事件中應用的選擇功能。因此，我們將條形類恢復為原始的“bar”類，並恢復所選條形的原始寬度和高度，並將 y 值恢復為原始值。
d3.selectAll(‘.val’).remove()函式用於刪除我們在條形選擇期間新增的文字值。
步驟 13 − 工作示例 − 完整的程式在以下程式碼塊中給出。建立一個網頁animated_bar.html並向其中新增以下更改。
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
fill: green;
}
.highlight {
fill: red;
}
.title {
fill: blue;
font-weight: bold;
}
</style>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<title> Animated bar chart </title>
</head>
<body>
<svg width = "500" height = "500"></svg>
<script>
var svg = d3.select("svg"),
margin = 200, width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
svg.append("text")
.attr("transform", "translate(100,0)")
.attr("x", 50).attr("y", 50)
.attr("font-size", "20px")
.attr("class", "title")
.text("Population bar chart")
var x = d3.scaleBand().range([0, width]).padding(0.4),
y = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.csv("data.csv", function(error, data) {
if (error) {
throw error;
}
x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.append("text")
.attr("y", height - 250)
.attr("x", width - 100)
.attr("text-anchor", "end")
.attr("font-size", "18px")
.attr("stroke", "blue").text("year");
g.append("g")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-5.1em")
.attr("text-anchor", "end")
.attr("font-size", "18px")
.attr("stroke", "blue")
.text("population");
g.append("g")
.attr("transform", "translate(0, 0)")
.call(d3.axisLeft(y))
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.attr("x", function(d) { return x(d.year); })
.attr("y", function(d) { return y(d.population); })
.attr("width", x.bandwidth()).transition()
.ease(d3.easeLinear).duration(200)
.delay(function (d, i) {
return i * 25;
})
.attr("height", function(d) { return height - y(d.population); });
});
function onMouseOver(d, i) {
d3.select(this)
.attr('class', 'highlight');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth() + 5)
.attr("y", function(d) { return y(d.population) - 10; })
.attr("height", function(d) { return height - y(d.population) + 10; });
g.append("text")
.attr('class', 'val')
.attr('x', function() {
return x(d.year);
})
.attr('y', function() {
return y(d.value) - 10;
})
}
function onMouseOut(d, i) {
d3.select(this)
.attr('class', 'bar');
d3.select(this)
.transition()
.duration(200)
.attr('width', x.bandwidth())
.attr("y", function(d) { return y(d.population); })
.attr("height", function(d) { return height - y(d.population); });
d3.selectAll('.val')
.remove()
}
</script>
</body>
</html>
現在，請求瀏覽器，我們將看到以下響應。
如果我們選擇任何條形，它將以紅色突出顯示。D3 是一個通用視覺化庫，它處理將資料轉換為資訊、文件、元素等，並最終幫助建立資料視覺化。