D3.js - Wybory

Wybór jest jedną z podstawowych koncepcji w D3.js. Opiera się na selektorach CSS. Pozwala nam wybrać jeden lub więcej elementów na stronie internetowej. Ponadto pozwala nam modyfikować, dołączać lub usuwać elementy w odniesieniu do predefiniowanego zbioru danych. W tym rozdziale zobaczymy, jak używać selekcji do tworzenia wizualizacji danych.

D3.js pomaga wybrać elementy ze strony HTML za pomocą dwóch następujących metod -

select()- Wybiera tylko jeden element DOM, dopasowując podany selektor CSS. Jeśli istnieje więcej niż jeden element dla danego selektora CSS, wybiera on tylko pierwszy.
selectAll()- Wybiera wszystkie elementy DOM, dopasowując podany selektor CSS. Jeśli jesteś zaznajomiony z wybieraniem elementów za pomocą jQuery, selektory D3.js są prawie takie same.

Przeanalizujmy szczegółowo każdą z metod.

Metoda select ()

Metoda select () wybiera element HTML na podstawie selektorów CSS. W selektorach CSS możesz definiować elementy HTML i uzyskiwać do nich dostęp na trzy sposoby -

Znacznik elementu HTML (np. Div, h1, p, span itp.)
Nazwa klasy elementu HTML
Identyfikator elementu HTML

Zobaczmy to w akcji na przykładach.

Wybór według tagu

Możesz wybrać elementy HTML za pomocą jego TAG. Następująca składnia służy do wybierania elementów znacznika „div”,

d3.select(“div”)

Example - Utwórz stronę „select_by_tag.html” i dodaj następujące zmiany,

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe -

Wybór według nazwy klasy

Elementy HTML stylizowane za pomocą klas CSS można wybierać za pomocą następującej składni.

d3.select(“.<class name>”)

Utwórz stronę internetową „select_by_class.html” i dodaj następujące zmiany -

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe -

Wybór według identyfikatora

Każdy element na stronie HTML powinien mieć unikalny identyfikator. Możemy użyć tego unikalnego identyfikatora elementu, aby uzyskać do niego dostęp za pomocą metody select (), jak określono poniżej.

d3.select(“#<id of an element>”)

Utwórz stronę internetową „select_by_id.html” i dodaj następujące zmiany.

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe.

Dodawanie elementów DOM

Wybór D3.js zapewnia append() i text()metody dołączania nowych elementów do istniejących dokumentów HTML. Ta sekcja wyjaśnia szczegółowo dodawanie elementów DOM.

Metoda append ()

Metoda append () dołącza nowy element jako ostatnie dziecko elementu w bieżącym zaznaczeniu. Ta metoda może również modyfikować styl elementów, ich atrybuty, właściwości, HTML i zawartość tekstową.

Utwórz stronę internetową „select_and_append.html” i dodaj następujące zmiany -

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie można było zobaczyć następujące dane wyjściowe,

W tym przypadku metoda append () dodaje nowy zakres znaczników wewnątrz znacznika DIV, jak pokazano poniżej -

<div class = "myclass">
   Hello World!<span></span>
</div>

Metoda text ()

Metoda text () służy do ustawienia zawartości wybranych / dołączonych elementów. Zmieńmy powyższy przykład i dodajmy metodę text (), jak pokazano poniżej.

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

Teraz odśwież stronę, a zobaczysz następującą odpowiedź.

Tutaj powyższy skrypt wykonuje operację łączenia. D3.js inteligentnie wykorzystuje technikę zwanąchain syntax, z których możesz rozpoznać jQuery. Łącząc metody razem z kropkami, możesz wykonać kilka czynności w jednym wierszu kodu. To jest szybkie i łatwe. Ten sam skrypt może również uzyskać dostęp bez składni łańcucha, jak pokazano poniżej.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Modyfikowanie elementów

D3.js udostępnia różne metody, html(), attr() i style()aby zmodyfikować zawartość i styl wybranych elementów. Zobaczmy, jak używać metod modyfikacji w tym rozdziale.

Metoda html ()

Metoda html () służy do ustawienia zawartości html wybranych / dołączonych elementów.

Utwórz stronę internetową „select_and_add_html.html” i dodaj następujący kod.

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe.

Metoda attr ()

Metoda attr () służy do dodawania lub aktualizowania atrybutu wybranych elementów. Utwórz stronę internetową „select_and_modify.html” i dodaj następujący kod.

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe.

Metoda style ()

Metoda style () służy do ustawiania właściwości stylu wybranych elementów. Utwórz stronę internetową „select_and_style.html” i dodaj następujący kod.

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe.

Metoda classed ()

Metoda classed () służy wyłącznie do ustawiania atrybutu „class” elementu HTML. Ponieważ pojedynczy element HTML może mieć wiele klas; musimy zachować ostrożność podczas przypisywania klasy do elementu HTML. Ta metoda wie, jak obsłużyć jedną lub wiele klas w elemencie i będzie wydajna.

Add class- Aby dodać klasę, drugi parametr metody klasyfikowanej musi mieć wartość true. Jest zdefiniowany poniżej -

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

Remove class- Aby usunąć klasę, drugi parametr metody klasyfikowanej musi mieć wartość false. Jest zdefiniowany poniżej -

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

Check class- Aby sprawdzić istnienie klasy, po prostu pomiń drugi parametr i podaj nazwę klasy, o którą pytasz. To zwróci prawdę, jeśli istnieje, fałsz, jeśli nie.

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

Zwróci to prawdę, jeśli jakikolwiek element w zaznaczeniu ma klasę. Posługiwać sięd3.select do wyboru pojedynczego elementu.

Toggle class - Aby przełączyć klasę do stanu przeciwnego - usuń ją, jeśli już istnieje, dodaj ją, jeśli jeszcze nie istnieje - możesz wykonać jedną z następujących czynności.

W przypadku pojedynczego elementu kod może wyglądać tak, jak pokazano poniżej -

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

Metoda selectAll ()

Metoda selectAll () służy do zaznaczania wielu elementów w dokumencie HTML. Metoda select wybiera pierwszy element, ale metoda selectAll wybiera wszystkie elementy, które pasują do określonego ciągu selektora. W przypadku, gdy wybór nie pasuje do żadnego, zwraca pusty wybór. Możemy połączyć wszystkie dołączone metody modyfikujące,append(), html(), text(), attr(), style(), classed(),itp. również w metodzie selectAll (). W takim przypadku metody wpłyną na wszystkie pasujące elementy. Pozwól nam zrozumieć, tworząc nową stronę internetową „select_multiple.html” i dodając następujący skrypt -

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

Żądając strony internetowej za pośrednictwem przeglądarki, na ekranie zobaczysz następujące dane wyjściowe.

W tym przypadku metoda attr () ma zastosowanie do obu div i h2 tag a kolor tekstu w obu znacznikach zmieni się na czerwony.