D3.js - Pilihan

Pilihan adalah salah satu konsep inti di D3.js. Ini didasarkan pada pemilih CSS. Ini memungkinkan kami untuk memilih satu atau lebih elemen di halaman web. Selain itu, ini memungkinkan kita untuk memodifikasi, menambahkan, atau menghapus elemen dalam kaitannya dengan kumpulan data yang telah ditentukan sebelumnya. Pada bab ini, kita akan melihat bagaimana menggunakan pilihan untuk membuat visualisasi data.

D3.js membantu memilih elemen dari halaman HTML menggunakan dua metode berikut -

select()- Memilih hanya satu elemen DOM dengan mencocokkan pemilih CSS yang diberikan. Jika ada lebih dari satu elemen untuk pemilih CSS tertentu, itu akan memilih yang pertama saja.
selectAll()- Memilih semua elemen DOM dengan mencocokkan pemilih CSS yang diberikan. Jika Anda terbiasa memilih elemen dengan jQuery, penyeleksi D3.js hampir sama.

Mari kita bahas masing-masing metode secara mendetail.

Metode select ()

Metode select () memilih elemen HTML berdasarkan Pemilih CSS. Di CSS Selectors, Anda dapat menentukan dan mengakses elemen HTML dengan tiga cara berikut -

Tag elemen HTML (mis. Div, h1, p, span, dll.,)
Nama kelas dari elemen HTML
ID dari elemen HTML

Mari kita lihat cara kerjanya dengan contoh-contoh.

Seleksi berdasarkan Tag

Anda dapat memilih elemen HTML menggunakan TAG-nya. Sintaks berikut digunakan untuk memilih elemen tag "div",

d3.select(“div”)

Example - Buat halaman "select_by_tag.html" dan tambahkan perubahan berikut,

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar -

Seleksi berdasarkan nama Kelas

Elemen HTML yang ditata menggunakan kelas CSS dapat dipilih dengan menggunakan sintaks berikut.

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

Buat halaman web “select_by_class.html” dan tambahkan perubahan berikut -

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar -

Seleksi berdasarkan ID

Setiap elemen di halaman HTML harus memiliki ID unik. Kita bisa menggunakan ID unik dari sebuah elemen untuk mengaksesnya menggunakan metode select () seperti yang ditentukan di bawah ini.

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

Buat halaman web “select_by_id.html” dan tambahkan perubahan berikut.

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar.

Menambahkan Elemen DOM

Pilihan D3.js menyediakan file append() dan text()metode untuk menambahkan elemen baru ke dalam dokumen HTML yang ada. Bagian ini menjelaskan tentang menambahkan elemen DOM secara detail.

Metode append ()

Metode append () menambahkan elemen baru sebagai turunan terakhir dari elemen dalam pilihan saat ini. Metode ini juga dapat memodifikasi gaya elemen, atributnya, propertinya, HTML, dan konten teksnya.

Buat halaman web “select_and_append.html” dan tambahkan perubahan berikut -

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

Meminta halaman web melalui browser, Anda dapat melihat output berikut di layar,

Di sini, metode append () menambahkan rentang tag baru di dalam tag div seperti yang ditunjukkan di bawah ini -

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

Metode teks ()

Metode text () digunakan untuk mengatur konten dari elemen yang dipilih / ditambahkan. Mari kita ubah contoh di atas dan tambahkan metode text () seperti yang ditunjukkan di bawah 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>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Sekarang segarkan halaman web dan Anda akan melihat respons berikut.

Di sini, skrip di atas melakukan operasi perangkaian. D3.js secara cerdas menggunakan teknik yang disebutchain syntax, yang mungkin Anda kenali jQuery. Dengan merangkai metode bersama dengan titik, Anda dapat melakukan beberapa tindakan dalam satu baris kode. Cepat dan mudah. Skrip yang sama juga dapat mengakses tanpa sintaks rantai seperti yang ditunjukkan di bawah ini.

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

Memodifikasi Elemen

D3.js menyediakan berbagai metode, html(), attr() dan style()untuk mengubah konten dan gaya elemen yang dipilih. Mari kita lihat bagaimana menggunakan metode modifikasi di bab ini.

Metode html ()

Metode html () digunakan untuk menyetel konten html dari elemen yang dipilih / ditambahkan.

Buat halaman web “select_and_add_html.html” dan tambahkan kode berikut.

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar.

The attr () Metode

Metode attr () digunakan untuk menambah atau memperbarui atribut elemen yang dipilih. Buat halaman web “select_and_modify.html” dan tambahkan kode berikut.

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar.

Metode style ()

Metode style () digunakan untuk menyetel properti gaya dari elemen yang dipilih. Buat halaman web “select_and_style.html” dan tambahkan kode berikut.

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar.

Metode classed ()

Metode classed () secara eksklusif digunakan untuk menyetel atribut "class" dari elemen HTML. Karena, satu elemen HTML dapat memiliki banyak kelas; kita perlu berhati-hati saat menetapkan kelas ke elemen HTML. Metode ini tahu bagaimana menangani satu atau banyak kelas pada sebuah elemen, dan itu akan menjadi performant.

Add class- Untuk menambahkan kelas, parameter kedua dari metode kelas harus disetel ke true. Ini didefinisikan di bawah -

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

Remove class- Untuk menghapus kelas, parameter kedua dari metode kelas harus disetel ke false. Ini didefinisikan di bawah -

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

Check class- Untuk memeriksa keberadaan sebuah kelas, tinggalkan parameter kedua dan berikan nama kelas yang Anda tanyakan. Ini akan mengembalikan true, jika ada, false, jika tidak ada.

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

Ini akan mengembalikan nilai true, jika ada elemen dalam pemilihan yang memiliki kelas. Menggunakand3.select untuk pemilihan elemen tunggal.

Toggle class - Untuk membalik kelas ke status sebaliknya - hapus kelas jika sudah ada, tambahkan jika belum ada - Anda dapat melakukan salah satu hal berikut.

Untuk satu elemen, kodenya mungkin terlihat seperti yang ditunjukkan di bawah ini -

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

Metode selectAll ()

Metode selectAll () digunakan untuk memilih beberapa elemen dalam dokumen HTML. Metode select memilih elemen pertama, tetapi metode selectAll memilih semua elemen yang cocok dengan string pemilih tertentu. Jika pilihan tidak cocok, maka itu mengembalikan pilihan kosong. Kita dapat merangkai semua metode modifikasi tambahan,append(), html(), text(), attr(), style(), classed(),dll., dalam metode selectAll () juga. Dalam kasus ini, metode akan mempengaruhi semua elemen yang cocok. Mari kita pahami dengan membuat halaman web baru “select_multiple.html” dan menambahkan script berikut -

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

Dengan meminta halaman web melalui browser, Anda akan melihat output berikut di layar.

Di sini, metode attr () berlaku untuk keduanya div dan h2 tag dan warna teks di kedua tag berubah menjadi Merah.