D3.js - Kavramlar

D3.js, aşağıdakiler için açık kaynaklı bir JavaScript kitaplığıdır -

Belge Nesne Modelinin (DOM) veriye dayalı manipülasyonu.
Veriler ve şekillerle çalışma.
Doğrusal, hiyerarşik, ağ ve coğrafi veriler için görsel öğeler yerleştirme.
Kullanıcı arabirimi (UI) durumları arasında sorunsuz geçişler sağlar.
Etkili kullanıcı etkileşimi sağlamak.

Web Standartları

Görselleştirmeler oluşturmak için D3.js kullanmaya başlamadan önce, web standartlarına aşina olmamız gerekir. Aşağıdaki web standartları D3.js'de yoğun olarak kullanılmaktadır.

Köprü Metni Biçimlendirme Dili (HTML)
Belge Nesne Modeli (DOM)
Basamaklı Stil Sayfaları (CSS)
Ölçeklenebilir Vektör Grafikleri (SVG)
JavaScript

Bu web standartlarının her birini tek tek ayrıntılı olarak inceleyelim.

Köprü Metni Biçimlendirme Dili (HTML)

Bildiğimiz gibi, web sayfasının içeriğini yapılandırmak için HTML kullanılıyor. ".Html" uzantılı bir metin dosyasında saklanır.

Example - Tipik bir çıplak kemik HTML örneği şuna benzer

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

Belge Nesne Modeli (DOM)

Bir HTML sayfası bir tarayıcı tarafından yüklendiğinde, hiyerarşik bir yapıya dönüştürülür. HTML'deki her etiket, bir üst-alt hiyerarşiyle DOM'da bir öğeye / nesneye dönüştürülür. HTML'mizi daha mantıksal olarak yapılandırılmış hale getirir. DOM oluşturulduktan sonra, sayfadaki öğeleri işlemek (eklemek / değiştirmek / kaldırmak) daha kolay hale gelir.

Aşağıdaki HTML belgesini kullanarak DOM'u anlayalım -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Yukarıdaki HTML belgesinin belge nesne modeli aşağıdaki gibidir,

Basamaklı Stil Sayfaları (CSS)

HTML web sayfasına bir yapı kazandırırken, CSS stilleri web sayfasına bakmayı daha keyifli hale getirir. CSS birStyle Sheet LanguageHTML veya XML ile yazılmış bir belgenin sunumunu açıklamak için kullanılır (SVG veya XHTML gibi XML lehçeleri dahil). CSS, bir web sayfasında öğelerin nasıl oluşturulması gerektiğini açıklar.

Ölçeklenebilir Vektör Grafikleri (SVG)

SVG, web sayfasındaki görüntüleri oluşturmanın bir yoludur. SVG, doğrudan bir görüntü değildir, yalnızca metin kullanarak görüntü oluşturmanın bir yoludur. Adından da anlaşılacağı gibi birScalable Vector. Tarayıcının boyutuna göre kendini ölçeklendirir, bu nedenle tarayıcınızı yeniden boyutlandırmak görüntüyü bozmaz. IE 8 ve altı hariç tüm tarayıcılar SVG'yi destekler. Veri görselleştirmeleri görsel temsillerdir ve D3.js kullanarak görselleştirmeler oluşturmak için SVG'yi kullanmak uygundur.

SVG'yi, üzerine farklı şekiller çizebileceğimiz bir tuval olarak düşünün. İlk olarak, bir SVG etiketi oluşturalım -

<svg width = "500" height = "500"></<svg>

SVG için varsayılan ölçüm pikseldir, bu nedenle birimimizin piksel olup olmadığını belirtmemize gerek yoktur. Şimdi, bir dikdörtgen çizmek istersek, aşağıdaki kodu kullanarak çizebiliriz -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

SVG'de Çizgi, Daire, Elips, Metin ve Yol gibi başka şekiller çizebiliriz.

HTML öğelerini şekillendirmek gibi, SVG öğelerini de şekillendirmek basittir. Dikdörtgenin arka plan rengini sarı olarak ayarlayalım. Bunun için, bir "doldurma" özelliği eklememiz ve değeri aşağıda gösterildiği gibi sarı olarak belirtmemiz gerekiyor -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript, kullanıcının tarayıcısında çalıştırılan, gevşek bir şekilde yazılmış bir istemci tarafı kodlama dilidir. JavaScript, web kullanıcı arayüzünü etkileşimli hale getirmek için HTML öğeleriyle (DOM öğeleri) etkileşime girer. JavaScript,ECMAScript Standards, ECMA-262 teknik özelliklerine dayalı temel özellikleri ve ECMAScript standartlarına dayalı olmayan diğer özellikleri içerir. JavaScript bilgisi D3.js için bir ön koşuldur.