D3.js - 選擇

Created: November-04, 2018

選擇是 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

讓我們通過例子看看它的實際效果。

按標籤選擇

你可以使用其 TAG 選擇 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>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出 -

Hello World!

按類名選擇

可以使用以下語法選擇使用 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>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出 -

Hello World!

按 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>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出。

Hello World!

新增 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>

通過瀏覽器請求網頁，你可以在螢幕上看到以下輸出，

Hello World!

這裡，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>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出。

Hello World!

`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>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出。

Hello World!

`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>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出。

Hello World!

`classed()` 方法

classed() 方法專門用於設定 HTML 元素的 class 屬性。因為，單個 HTML 元素可以有多個類; 在為 HTML 元素分配類時，我們需要小心。此方法知道如何處理元素上的一個或多個類，並且它將具有高效能。

新增類 - 要新增類，必須將分類方法的第二個引數設定為 true。它定義如下 -

d3.select(".myclass").classed("myanotherclass", true);

刪除類 - 要刪除類，必須將分類方法的第二個引數設定為 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 方法選擇與特定選擇器字串匹配的所有元素。如果選擇匹配 none，則返回空選擇。我們也可以在 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>

通過瀏覽器請求網頁，你將在螢幕上看到以下輸出。

Message
Hello World!

這裡，attr() 方法適用於 div 和 h2 標記，兩個標記中文字的顏色都變為紅色。

select() 方法

按標籤選擇

按類名選擇

按 ID 選擇

新增 DOM 元素

append() 方法

text() 方法

修改元素

html() 方法

attr() 方法

style() 方法

classed() 方法

selectAll() 方法

`select()` 方法

`append()` 方法

`text()` 方法

`html()` 方法

`attr()` 方法

`style()` 方法

`classed()` 方法

`selectAll()` 方法