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 標籤，並且兩個標籤中文字的顏色都變為紅色。

列印頁面
上一頁
下一頁
廣告