D3.js - Seçimler

Seçimler, D3.js'deki temel kavramlardan biridir. CSS seçicilerine dayanır. Bir web sayfasındaki bir veya daha fazla öğeyi seçmemizi sağlar. Ek olarak, önceden tanımlanmış veri kümesiyle ilişkili öğeleri değiştirmemize, eklememize veya kaldırmamıza olanak tanır. Bu bölümde, veri görselleştirmeleri oluşturmak için seçimleri nasıl kullanacağımızı göreceğiz.

D3.js, aşağıdaki iki yöntemi kullanarak HTML sayfasından öğe seçmenize yardımcı olur -

select()- Verilen CSS seçiciyle eşleşerek yalnızca bir DOM öğesini seçer. Belirli CSS seçici için birden fazla öğe varsa, yalnızca ilkini seçer.
selectAll()- Verilen CSS seçiciyle eşleşerek tüm DOM öğelerini seçer. JQuery ile öğeleri seçme konusunda bilgiliyseniz, D3.js seçicileri neredeyse aynıdır.

Her bir yöntemi ayrıntılı olarak inceleyelim.

Select () yöntemi

Select () yöntemi, HTML öğesini CSS Seçicilerine göre seçer. CSS Seçicilerde, HTML öğelerini aşağıdaki üç yolla tanımlayabilir ve bunlara erişebilirsiniz:

Bir HTML öğesinin etiketi (ör. Div, h1, p, span vb.)
Bir HTML öğesinin sınıf adı
HTML öğesinin kimliği

Örneklerle eylem halinde görelim.

Etikete Göre Seçim

TAG'ını kullanarak HTML öğelerini seçebilirsiniz. "Div" etiketi öğelerini seçmek için aşağıdaki sözdizimi kullanılır,

d3.select(“div”)

Example - Bir "select_by_tag.html" sayfası oluşturun ve aşağıdaki değişiklikleri ekleyin,

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

Tarayıcı üzerinden web sayfasını talep ederek, ekranda aşağıdaki çıktıyı göreceksiniz -

Sınıf adına göre seçim

CSS sınıfları kullanılarak stil verilen HTML öğeleri, aşağıdaki sözdizimi kullanılarak seçilebilir.

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

Bir "select_by_class.html" web sayfası oluşturun ve aşağıdaki değişiklikleri ekleyin -

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

Tarayıcı üzerinden web sayfasını talep ederek, ekranda aşağıdaki çıktıyı göreceksiniz -

Kimliğe göre seçim

Bir HTML sayfasındaki her öğenin benzersiz bir kimliği olmalıdır. Bir elemanın bu benzersiz kimliğini aşağıda belirtildiği gibi select () yöntemini kullanarak ona erişmek için kullanabiliriz.

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

Bir "select_by_id.html" web sayfası oluşturun ve aşağıdaki değişiklikleri ekleyin.

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

Tarayıcı üzerinden web sayfasını talep ettiğinizde, ekranda aşağıdaki çıktıyı göreceksiniz.

DOM Öğeleri Ekleme

D3.js seçimi, append() ve text()mevcut HTML belgelerine yeni öğeler ekleme yöntemleri. Bu bölümde DOM öğelerinin eklenmesi hakkında ayrıntılı bilgi verilmektedir.

Append () Yöntemi

Append () yöntemi, geçerli seçimdeki öğenin son alt öğesi olarak yeni bir öğe ekler. Bu yöntem aynı zamanda elemanların stilini, niteliklerini, özelliklerini, HTML ve metin içeriğini değiştirebilir.

Bir "select_and_append.html" web sayfası oluşturun ve aşağıdaki değişiklikleri ekleyin -

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

Web sayfasını tarayıcı üzerinden talep ederek, ekranda aşağıdaki çıktıyı görebilirsiniz,

Burada, append () yöntemi, aşağıda gösterildiği gibi div etiketinin içine yeni bir etiket aralığı ekler -

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

Text () Yöntemi

Text () yöntemi, seçilen / eklenen öğelerin içeriğini ayarlamak için kullanılır. Yukarıdaki örneği değiştirelim ve aşağıda gösterildiği gibi text () yöntemini ekleyelim.

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

Şimdi web sayfasını yenileyin ve aşağıdaki yanıtı göreceksiniz.

Burada, yukarıdaki komut dosyası bir zincirleme işlemi gerçekleştirir. D3.js, akıllıca adı verilen bir tekniği kullanır.chain syntaxtanıyabileceğiniz jQuery. Yöntemleri noktalarla birlikte zincirleyerek, tek bir kod satırında birkaç eylem gerçekleştirebilirsiniz. Hızlı ve kolaydır. Aynı komut dosyası, aşağıda gösterildiği gibi zincir sözdizimi olmadan da erişebilir.

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

Öğeleri Değiştirme

D3.js çeşitli yöntemler sağlar, html(), attr() ve style()seçilen öğelerin içeriğini ve stilini değiştirmek için. Bu bölümde değiştirme yöntemlerinin nasıl kullanılacağını görelim.

Html () Yöntemi

Html () yöntemi, seçilen / eklenen öğelerin html içeriğini ayarlamak için kullanılır.

Bir "select_and_add_html.html" web sayfası oluşturun ve aşağıdaki kodu ekleyin.

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

Tarayıcı üzerinden web sayfasını talep ettiğinizde, ekranda aşağıdaki çıktıyı göreceksiniz.

Attr () Yöntemi

Attr () yöntemi, seçilen öğelerin niteliğini eklemek veya güncellemek için kullanılır. Bir "select_and_modify.html" web sayfası oluşturun ve aşağıdaki kodu ekleyin.

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

Tarayıcı üzerinden web sayfasını talep ettiğinizde, ekranda aşağıdaki çıktıyı göreceksiniz.

Style () Yöntemi

Style () yöntemi, seçilen öğelerin stil özelliğini ayarlamak için kullanılır. Bir "select_and_style.html" web sayfası oluşturun ve aşağıdaki kodu ekleyin.

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

Tarayıcı üzerinden web sayfasını talep ettiğinizde, ekranda aşağıdaki çıktıyı göreceksiniz.

Classed () Yöntem

Classed () yöntemi, özel olarak bir HTML öğesinin "class" özelliğini ayarlamak için kullanılır. Tek bir HTML öğesi birden çok sınıfa sahip olabileceğinden; Bir HTML öğesine sınıf atarken dikkatli olmamız gerekir. Bu yöntem, bir eleman üzerindeki bir veya daha fazla sınıfın nasıl işleneceğini bilir ve performant olacaktır.

Add class- Bir sınıf eklemek için, sınıflandırılmış yöntemin ikinci parametresi true olarak ayarlanmalıdır. Aşağıda tanımlanmıştır -

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

Remove class- Bir sınıfı kaldırmak için, sınıflandırılmış yöntemin ikinci parametresi false olarak ayarlanmalıdır. Aşağıda tanımlanmıştır -

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

Check class- Bir sınıfın varlığını kontrol etmek için, ikinci parametreyi bırakmanız ve sorguladığınız sınıf adını iletmeniz yeterlidir. Bu, varsa doğru, yoksa yanlış olarak dönecektir.

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

Seçimdeki herhangi bir öğe sınıfa sahipse bu, true değerini döndürür. Kullanımd3.select tek eleman seçimi için.

Toggle class - Bir sınıfı ters duruma çevirmek için - zaten varsa onu kaldırın, henüz yoksa ekleyin - aşağıdakilerden birini yapabilirsiniz.

Tek bir öğe için, kod aşağıda gösterildiği gibi görünebilir -

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

SelectAll () Yöntemi

SelectAll () yöntemi, HTML belgesindeki birden çok öğeyi seçmek için kullanılır. Select yöntemi ilk öğeyi seçer, ancak selectAll yöntemi, belirli seçici dizesiyle eşleşen tüm öğeleri seçer. Seçim hiçbiriyle eşleşmezse, boş bir seçim döndürür. Tüm ek değiştirme yöntemlerini zincirleyebiliriz,append(), html(), text(), attr(), style(), classed(),vb. selectAll () yönteminde de. Bu durumda, yöntemler eşleşen tüm öğeleri etkileyecektir. Yeni bir web sayfası "select_multiple.html" oluşturarak anlayalım ve aşağıdaki komut dosyasını ekleyelim -

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

Tarayıcı üzerinden web sayfasını talep ettiğinizde, ekranda aşağıdaki çıktıyı göreceksiniz.

Burada, attr () yöntemi her ikisi için de geçerlidir div ve h2 tag ve her iki etiketteki metnin rengi Kırmızı olarak değişir.