Cara Select() di D3.js

admin admin Aug 22, 2018 1652 0

Cara Select() di D3.js

select () merupakan suatu method yang penting di d3.js. yang memungkinkan kita untuk memilih satu atau lebih elemen di halaman web.

selain memilih elemen select () juga bisa digunakan untuk memodifikasi, menambahkan, dan menghapus elemen.

ada dua method yang bisa membantu kita untuk memilih elemen dari HTML yaitu:

  1. select () memilih satu elemen DOM dengan mencocokkan pemilihan CSS yang diberikan, jika elemen lebih dari satu maka yang dipilih hanya yang pertama saja.
  2. selectall() memilih semua elemen DOM dengan mencocokkan pemilihan CSS yang diberikan, ini hampir sama dengan memilih elemen di JQuery

Mari kita pelajari secara lebih mendalam 2 metode diatas.

Metode select()

metode select() memilih elemen HTML berdasarkan CSS Selector, ada 3 cara untuk menentukan dan mengakses elemen HTML.

  1. Tag elemen HTML (div,h1,span dan tag HTML lainnya)
  2. nama class HTML
  3. ID elemen HTML

berikut masing masing contoh dari 3 cara diatas

Select Tag elemen HTML

kita dapat memilig elemen HTML dengan tag-nya, perhatikan contoh berikut, kita gunakan tag elemen "DIV" 

d3.select(“div”)

Contoh : silahkan buat file dengan ekstensi .html kemudian copy script berikut dan jalankan

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

ketika halaman diatas dijalankan akan menampilkan pesan "Hello Word"

Baca : Konsep D3.js

Select dengan nama Class

Elemen HTML yang ditata menggunakan Class CSS dapat dipilih dengan menggunakan sintaks berikut ini

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

Contoh : buat sebuah file dengan ekstensi .html kemudian copy script berikut ini

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

ketika halaman diatas dijalankan akan menampilkan pesan "Hello Word"

Select dengan ID elemen HTML

Setiap elemen di halaman HTML harus mempunyai ID yang unik, kita dapat mengunakan ID yang unik ini untuk melakukan select, seperti syntak dibawah ini.

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

Contoh : buat sebuah file dengan ekstensi .hml kemudian copy script berikut ini

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

ketika halaman diatas dijalankan akan menampilkan pesan "Hello Word"

Metode selectAll()

selectAll() digunakan untuk memilih beberapa elemen di dalam HTML , selectAll() memilih semua element yang cocok dengan string tertentu 

contoh : buat sebuah file dengan ekstensi HTML kemudian copy syntak berikut ini

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

ketika dijalankan maka akan keluar pesan

Message

Hello World!

itulah cara select method di d3.js, mudah kan ? masih banyak tutorial tentang d3.js , insha allah akan admin posting, terimakasih

jika anda merasa artike ini bermanfaat silahkan Share artikel ini.

Baca : Pengenalan D3.js

Baca : Cara Install D3.js

 

 

Tags: