D3.js - Hızlı Kılavuz

Veri görselleştirme, verilerin resimli veya grafik formatta sunulmasıdır. Veri görselleştirmenin birincil amacı, bilgileri istatistiksel grafikler, grafikler ve bilgi grafikleri aracılığıyla açık ve verimli bir şekilde iletmektir.

Veri görselleştirme, içgörülerimizi hızlı ve etkili bir şekilde iletmemize yardımcı olur. Görselleştirmeyle temsil edilen her tür veri, kullanıcıların verileri karşılaştırmasına, analitik raporlar oluşturmasına, kalıpları anlamasına ve böylece karar vermelerine yardımcı olur. Veri görselleştirmeleri etkileşimli olabilir, böylece kullanıcılar grafikteki belirli verileri analiz edebilir. Veri görselleştirmeleri, farklı JavaScript çerçeveleri kullanılarak normal web sitelerine ve hatta mobil uygulamalara geliştirilebilir ve entegre edilebilir.

D3.js nedir?

D3.js, tarayıcıda etkileşimli görselleştirmeler oluşturmak için kullanılan bir JavaScript kitaplığıdır. D3.js kitaplığı, bir web sayfasının öğelerini bir veri kümesi bağlamında değiştirmemize olanak tanır. Bu öğeler olabilirHTML, SVG, veya Canvas elementsve veri setinin içeriğine göre tanıtılabilir, çıkarılabilir veya düzenlenebilir. DOM nesnelerini işlemek için bir kitaplıktır. D3.js, veri keşfetmede değerli bir yardımcı olabilir, verilerinizin temsili üzerinde kontrol sağlar ve etkileşim eklemenize olanak tanır.

D3.js'ye Neden İhtiyacımız Var?

D3.js, diğer kitaplıklarla karşılaştırıldığında önde gelen çerçevelerden biridir. Bunun nedeni, web üzerinde çalışması ve veri görselleştirmelerinin mükemmel olmasıdır. Bu kadar iyi çalışmasının bir başka nedeni de esnekliğidir. Mevcut web teknolojileriyle sorunsuz çalıştığı ve belge nesne modelinin herhangi bir bölümünü değiştirebildiği için, en azClient Side Web Technology Stack(HTML, CSS ve SVG). Harika bir topluluk desteğine sahip ve öğrenmesi daha kolay.

D3.js Özellikleri

D3.js, en iyi veri görselleştirme çerçevelerinden biridir ve kullanıcı etkileşimi ve geçiş efektlerinin yanı sıra basit ve karmaşık görselleştirmeler oluşturmak için kullanılabilir. Göze çarpan özelliklerinden bazıları aşağıda listelenmiştir -

Son derece esnek.
Kullanımı kolay ve hızlı.
Büyük veri kümelerini destekler.
Bildirime dayalı programlama.
Kod yeniden kullanılabilirliği.
Çok çeşitli eğri oluşturma işlevlerine sahiptir.
Verileri html sayfasındaki bir öğe veya öğe grubuyla ilişkilendirir.

D3.js Avantajları

D3.js açık kaynaklı bir projedir ve herhangi bir eklenti olmadan çalışır. Çok daha az kod gerektirir ve aşağıdaki faydaları sağlar -

Harika veri görselleştirme.
Modülerdir. Kullanmak istediğiniz küçük bir D3.js parçasını indirebilirsiniz. Her seferinde tüm kitaplığı yüklemenize gerek yok.
Bir grafik bileşeni oluşturmak kolaydır.
DOM manipülasyonu.

Bir sonraki bölümde, D3.js'yi sistemimize nasıl kuracağımızı anlayacağız.

Bu bölümde, D3.js geliştirme ortamının nasıl kurulacağını öğreneceğiz. Başlamadan önce aşağıdaki bileşenlere ihtiyacımız var -

D3.js kitaplığı
Editor
internet tarayıcısı
Web sunucusu

Adımları tek tek ayrıntılı olarak inceleyelim.

D3.js Kitaplığı

Veri görselleştirme oluşturmak için D3.js kullanmak için D3.js kitaplığını HTML web sayfanıza eklememiz gerekir. Bunu şu iki şekilde yapabiliriz -

D3.js kitaplığını projenizin klasöründen ekleyin.
CDN'den (İçerik Dağıtım Ağı) D3.js kitaplığını dahil edin.

D3.js Kitaplığını İndirin

D3.js açık kaynaklı bir kitaplıktır ve kitaplığın kaynak kodu web'de ücretsiz olarak mevcuttur: https://d3js.org/İnternet sitesi. D3.js web sitesini ziyaret edin ve D3.js'nin (d3.zip) en son sürümünü indirin. Şu an itibariyle en son sürüm 4.6.0'dır.

İndirme işlemi tamamlandıktan sonra, dosyayı açın ve d3.min.js. Bu, D3.js kaynak kodunun küçültülmüş sürümüdür. D3.min.js dosyasını kopyalayın ve projenizin kök klasörüne veya tüm kitaplık dosyalarını saklamak istediğiniz başka bir klasöre yapıştırın. D3.min.js dosyasını aşağıda gösterildiği gibi HTML sayfanıza ekleyin.

Example - Şu örneği ele alalım.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js bir JavaScript kodudur, bu nedenle tüm D3 kodumuzu "script" etiketi içinde yazmalıyız. Mevcut DOM öğelerini değiştirmemiz gerekebilir, bu nedenle D3 kodunu "body" etiketinin sonundan hemen önce yazmamız önerilir.

CDN'den D3 Kitaplığını dahil et

D3.js kitaplığını İçerik Dağıtım Ağı'ndan (CDN) doğrudan HTML sayfamıza bağlayarak kullanabiliriz. CDN, dosyaların barındırıldığı ve coğrafi konumlarına göre bir kullanıcıya teslim edildiği bir sunucular ağıdır. CDN kullanırsak, kaynak kodunu indirmemize gerek yoktur.

CDN URL'sini kullanarak D3.js kitaplığını dahil edin https://d3js.org/d3.v4.min.js aşağıda gösterildiği gibi sayfamıza.

Example - Şu örneği ele alalım.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js Düzenleyici

Kodunuzu yazmaya başlamak için bir düzenleyiciye ihtiyacımız olacak. JavaScript desteği olan bazı harika IDE'ler (Entegre Geliştirme Ortamı) vardır -

Visual Studio Kodu
WebStorm
Eclipse
Yüce metin

Bu IDE'ler akıllı kod tamamlamanın yanı sıra bazı modern JavaScript çerçevelerini destekler. Süslü bir IDE'niz yoksa, her zaman Not Defteri, VI vb. Gibi temel bir düzenleyici kullanabilirsiniz.

İnternet tarayıcısı

D3.js, IE8 ve önceki sürümler dışındaki tüm tarayıcılarda çalışır.

Web sunucusu

Çoğu tarayıcı, yerel HTML dosyalarını doğrudan yerel dosya sisteminden sunar. Bununla birlikte, harici veri dosyalarının yüklenmesi söz konusu olduğunda belirli kısıtlamalar vardır. Bu eğitimin sonraki bölümlerinde, aşağıdaki gibi harici dosyalardan veri yükleyeceğizCSV ve JSON. Dolayısıyla web sunucusunu en başından kurarsak bizim için daha kolay olacaktır.

Rahat olduğunuz herhangi bir web sunucusunu kullanabilirsiniz - örneğin IIS, Apache, vb.

Sayfanızı Görüntüleme

Çoğu durumda, görüntülemek için HTML dosyanızı bir web tarayıcısında açabiliriz. Bununla birlikte, harici veri kaynaklarını yüklerken, yerel bir web sunucusu çalıştırmak ve sayfanızı sunucudan görüntülemek daha güvenilirdir.(http://localhost:8080).

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 yumuşak geçişlerin etkinleştirilmesi.
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 bir şekilde 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'daki bir öğeye / nesneye dönüştürülür. HTML'imizi 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, öğelerin bir web sayfasında 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ın yeniden boyutlandırılması 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. Öncelikle, 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 yürütülen, 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.

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 öğe seçme konusunda bilginiz varsa, 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. Aşağıdaki sözdizimi, "div" etiketi öğelerini seçmek için 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ı aracılığıyla web sayfasını talep ettiğinizde, 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ı aracılığıyla web sayfasını talep ettiğinizde, 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 performanslayıcı 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ırakın ve sorguladığınız sınıf adını iletin. 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ı zıt 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(),selectAll () yönteminde de vb. 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.

Veri birleştirme D3.js'deki bir başka önemli kavramdır. Seçimlerle birlikte çalışır ve HTML belgesini veri setimize (bir dizi sayısal değer) göre değiştirmemizi sağlar. Varsayılan olarak D3.js, veri kümesine yöntemlerinde en yüksek önceliği verir ve veri kümesindeki her öğe bir HTML öğesine karşılık gelir. Bu bölüm, veri birleştirmelerini ayrıntılı olarak açıklamaktadır.

Veri Birleştirme nedir?

Veri birleştirme, mevcut HTML belgesindeki veri kümesine dayalı olarak öğeleri (HTML öğesi ve gömülü SVG öğeleri) enjekte etmemize, değiştirmemize ve kaldırmamıza olanak tanır. Varsayılan olarak, veri kümesindeki her veri öğesi belgedeki bir öğeye (grafiksel) karşılık gelir.

Veri seti değiştikçe, karşılık gelen eleman da kolaylıkla manipüle edilebilir. Veri birleştirme, verilerimiz ve belgenin grafik öğeleri arasında yakın bir ilişki oluşturur. Veri birleştirme, veri kümesine dayalı olarak öğelerin işlenmesini çok basit ve kolay bir işlem haline getirir.

Veri Birleştirme Nasıl Çalışır?

Veri birleştirmenin birincil amacı, mevcut belgenin öğelerini verilen veri kümesiyle eşlemektir. Verilen veri setine göre belgenin sanal bir temsilini oluşturur ve sanal temsil ile çalışmak için yöntemler sağlar. Aşağıda gösterildiği gibi basit bir veri seti düşünelim.

[10, 20, 30, 25, 15]

Veri setinin beş öğesi vardır ve bu nedenle, belgenin beş öğesi ile eşleştirilebilir. Şununla eşleştirelim:li seçicinin selectAll () yöntemini ve data join'in data () yöntemini kullanan aşağıdaki belgenin öğesi.

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

D3.js kodu

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

Şimdi, belgede beş sanal öğe var. İlk iki sanal öğe,li aşağıda gösterildiği gibi belgede tanımlanan öğe.

1. li - 10
2. li - 20

Seçicinin tüm eleman değiştirme yöntemlerini kullanabiliriz. attr(), style(), text(), vb., ilk ikisi için li Aşağıda gösterildiği gibi.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

Text () yöntemindeki işlev, liöğeler verileri eşledi. Buraya,d ilk olarak 10'u temsil eder li element ve 20 saniye li öğesi.

Sonraki üç öğe herhangi bir öğeye eşlenebilir ve veri join'in enter () ve seçicinin append () yöntemi kullanılarak yapılabilir. Enter () yöntemi kalan verilere (var olan öğelerle eşlenmeyen) erişim sağlar ve append () yöntemi karşılık gelen verilerden yeni bir öğe oluşturmak için kullanılır. Yaratalımlikalan veri öğeleri için de. Veri haritası aşağıdaki gibidir -

3. li - 30
4. li - 25
5. li - 15

Yeni bir li öğesi oluşturma kodu aşağıdaki gibidir -

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

Veri birleştirme, exit() method aşağıda gösterildiği gibi veri kümesinden dinamik olarak çıkarılan veri öğelerini işlemek için.

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

Burada, veri setinden dördüncü öğeyi ve buna karşılık gelen li öğesini exit () ve remove () yöntemlerini kullanarak kaldırdık.

Kodun tamamı aşağıdaki gibidir -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

Yukarıdaki kodun sonucu aşağıdaki gibi olacaktır -

D3, bir modül koleksiyonu içerir. İşlemleri gerçekleştirmek için her modülü bağımsız olarak veya bir modül koleksiyonunu birlikte kullanabilirsiniz. Bu bölüm, Dizi API'sini ayrıntılı olarak açıklamaktadır.

Dizi nedir?

Bir Dizi, aynı türden sabit boyutlu sıralı bir öğe koleksiyonu içerir. Bir dizi, bir veri koleksiyonunu depolamak için kullanılır, ancak bir diziyi aynı türden bir değişkenler koleksiyonu olarak düşünmek genellikle daha kullanışlıdır.

API'yi Yapılandırma

API'yi aşağıdaki komut dosyasını kullanarak kolayca yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

Dizi İstatistikleri API Yöntemleri

Aşağıda en önemli dizi istatistikleri API yöntemlerinden bazıları verilmiştir.

d3.min(array)
d3.max(array)
d3.extent(array)
d3.sum(array)
d3.mean(array)
d3.quantile(array)
d3.variance(array)
d3.deviation(array)

Bunların her birini ayrıntılı olarak tartışalım.

d3.min (dizi)

Doğal sırayı kullanarak verilen dizideki minimum değeri döndürür.

Example - Aşağıdaki komut dosyasını düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - Yukarıdaki komut dosyası, konsolunuzdaki 20 dizisindeki minimum değeri döndürür.

d3.max (dizi)

Belirli bir dizideki maksimum değeri döndürür.

Example - Aşağıdaki komut dosyasını düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - Yukarıdaki komut dosyası, konsolunuzdaki dizideki (100) maksimum değeri döndürür.

d3.extent (dizi)

Verilen dizideki minimum ve maksimum değeri döndürür.

Example - Aşağıdaki komut dosyasını düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - Yukarıdaki komut dosyası bir kapsam değeri [20,100] döndürür.

d3.sum (dizi)

Verilen sayı dizisinin toplamını döndürür. Dizi boşsa 0 döndürür.

Example - Aşağıdakileri düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - Yukarıdaki komut dosyası, 300 toplam değerini döndürür.

d3.mean (dizi)

Verilen sayı dizisinin ortalamasını döndürür.

Example - Aşağıdakileri düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - Yukarıdaki komut dosyası ortalama değeri 60 olarak döndürür. Benzer şekilde, medyan değeri kontrol edebilirsiniz.

d3.quantile (dizi)

Verilen sıralı sayı dizisinin p-kuantilini döndürür; burada p, [0, 1] aralığındaki bir sayıdır. Örneğin, medyan p = 0.5, ilk çeyrek p = 0.25 ve üçüncü çeyrek p = 0.75 kullanılarak hesaplanabilir. Bu uygulama R-7 yöntemini, varsayılan R programlama dilini ve Excel'i kullanır.

Example - Aşağıdaki örneği düşünün.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Benzer şekilde, diğer değerleri de kontrol edebilirsiniz.

d3.variance (dizi)

Verilen sayı dizisinin varyansını döndürür.

Example - Aşağıdaki komut dosyasını düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - Yukarıdaki komut dosyası, varyans değerini 1000 olarak döndürür.

d3. sapma (dizi)

Verilen dizinin standart sapmasını döndürür. Dizi ikiden az değere sahipse, tanımsız olarak döner.

Example - Aşağıdakileri düşünün.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - Yukarıdaki komut dosyası sapma değerini 31.622776601683793 olarak döndürür.

Example- Yukarıda tartışılan tüm Array API yöntemlerini aşağıdaki komut dosyasını kullanarak gerçekleştirelim. Bir “dizi.html” web sayfası oluşturun ve buna aşağıdaki değişiklikleri ekleyin.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Dizi Arama API Yöntemleri

Aşağıda birkaç önemli Dizi arama API yöntemi verilmiştir.

d3.scan(array)
d3. artan (a, b)

Her ikisini de ayrıntılı olarak anlayalım.

d3.scan (dizi)

Bu yöntem, belirtilen dizinin doğrusal bir taramasını gerçekleştirmek için kullanılır. En az elemanın dizinini belirtilen karşılaştırıcıya döndürür. Aşağıda basit bir örnek tanımlanmıştır.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3. artan (a, b)

Bu yöntem, karşılaştırıcı işlevini gerçekleştirmek için kullanılır. Şu şekilde uygulanabilir -

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Yerleşik sıralama yönteminde karşılaştırma işlevi belirtilmezse, varsayılan sıra alfabetiktir. Yukarıdaki işlev, a b'den küçükse -1 veya a, b'den büyükse 1 veya 0 döndürür.

Benzer şekilde, azalan (a, b) yöntemini uygulayabilirsiniz. A, b'den büyükse -1 veya a, b'den küçükse 1 veya 0 döndürür. Bu işlev ters doğal sıralama gerçekleştirir.

Example -

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

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki sonucu göreceğiz.

Dizi Dönüşümleri API'si

Aşağıda en belirgin dizi dönüşümleri API yöntemlerinden bazıları verilmiştir.

d3.cross (a, b [, redüktör])
d3.merge(arrays)
d3.pairs (dizi [, düşürücü])
d3.permute (dizi, dizinler)
d3.zip(arrays)

Bunların her birini ayrıntılı olarak anlayalım.

d3.cross (a, b [, redüktör])

Bu yöntem, verilen iki dizi a ve b'nin Kartezyen çarpımını döndürmek için kullanılır. Aşağıda basit bir örnek tanımlanmıştır.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (diziler)

Bu yöntem dizileri birleştirmek için kullanılır ve aşağıda tanımlanmıştır.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (dizi [, düşürücü])

Bu yöntem, dizi öğelerini eşleştirmek için kullanılır ve aşağıda tanımlanmıştır.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (dizi, dizinler)

Bu yöntem, belirtilen dizi ve dizinlerden permütasyonu gerçekleştirmek için kullanılır. Ayrıca bir nesnedeki değerleri bir diziye de gerçekleştirebilirsiniz. Aşağıda açıklanmıştır.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (diziler)

Bu yöntem, bir dizi dizisi döndürmek için kullanılır. Diziler yalnızca tek bir dizi içeriyorsa, döndürülen dizi tek öğeli dizileri içerir. Hiçbir bağımsız değişken belirtilmezse, döndürülen dizi boştur. Aşağıda tanımlanmıştır.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

Example - Bir web sayfası oluşturun array_transform ve aşağıdaki değişiklikleri ekleyin.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Bir koleksiyon, birden çok öğeyi tek bir birimde gruplayan basit bir nesnedir. Aynı zamanda konteyner olarak da adlandırılır. Bu bölüm, koleksiyonlar API'sini ayrıntılı olarak açıklamaktadır.

API'yi Yapılandırma

API'yi aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script>

</script>

Koleksiyonlar API Yöntemleri

Koleksiyonlar API'si nesneleri, haritaları, kümeleri ve yuvaları içerir. Aşağıda en sık kullanılan koleksiyon API yöntemleri verilmiştir.

Nesneler API'si
Maps API
API'yi ayarlar
Nests API

Bu API'lerin her birini ayrıntılı olarak inceleyelim.

Nesneler API'si

Object API, önemli veri türlerinden biridir. Aşağıdaki yöntemleri destekler -

d3.keys(object) - Bu yöntem, nesne özellik anahtarlarını içerir ve özellik adlarının bir dizisini döndürür.
d3.values(object) - Bu yöntem, nesne değerlerini içerir ve bir özellik değerleri dizisi döndürür.
d3.entries(object)- Bu yöntem, belirtilen nesnenin hem anahtarlarını hem de değerlerini içeren bir dizi döndürmek için kullanılır. Her giriş, bir anahtarı ve değeri olan bir nesnedir.

Example - Aşağıdaki kodu ele alalım.

d3.entries({one: 1})

Burada anahtar bir ve değer 1'dir.

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

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = {"jan": 1, "Feb": 2, "mar": 3, "apr": 4};
         console.log(d3.keys(month));
         console.log(d3.values(month));
         console.log(d3.entries(month));
      </script>
   </body>
</html>

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceksiniz.

Maps API

Bir harita, anahtar ve değer çiftlerine dayalı değerler içerir. Her anahtar ve değer çifti bir giriş olarak bilinir. Bir Harita yalnızca benzersiz anahtarlar içerir. Öğeleri anahtara göre aramak, güncellemek veya silmek yararlıdır. Çeşitli Maps API yöntemlerini ayrıntılı olarak inceleyelim.

d3.map([object[, key]])- Bu yöntem, yeni bir harita oluşturmak için kullanılır. Nesne, tüm numaralandırılabilir özellikleri kopyalamak için kullanılır.
map.has(key) - Bu yöntem, haritanın belirtilen anahtar dizesi için bir girişi olup olmadığını kontrol etmek için kullanılır.
map.get(key) - Bu yöntem, belirtilen anahtar dizesinin değerini döndürmek için kullanılır.
map.set(key, value)- Bu yöntem, belirtilen anahtar dizesinin değerini ayarlamak için kullanılır. Haritada önceden aynı anahtar dizesi için bir giriş varsa, eski giriş yeni değerle değiştirilir.
map.remove(key)- Harita girişini kaldırmak için kullanılır. Anahtar belirtilmezse, yanlış döndürür.
map.clear() - Bu haritadan tüm girişleri kaldırır.
map.keys() - Bu haritadaki her giriş için bir dizi dize anahtarı döndürür.
map.values() - Bu haritadaki her giriş için bir değer dizisi döndürür.
map.entries() - Bu haritadaki her giriş için bir dizi anahtar-değer nesnesi döndürür.
(x) map.each(function) - Bu yöntem, haritadaki her giriş için belirtilen işlevi çağırmak için kullanılır.
(xi) map.empty() - Yalnızca ve ancak bu haritanın sıfır girişi varsa doğru döndürür.
(xii) map.size() - Bu haritadaki girişlerin sayısını döndürür.

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

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var month = d3.map([{name: "jan"}, {name: "feb"}], 
            function(d) { return d.name; });
         console.log(month.get("jan")); // {"name": "jan"}
         console.log(month.get("apr")); // undefined
         console.log(month.has("feb")); // true
         
         var map =  d3.map().set("fruit", "mango");
         console.log(map.get("fruit")); // mango
         console.log(map.remove("fruit")); // remove key and return true.
         console.log(map.size());    // size is 0 because key removed.
         console.log(map.empty());   // true
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Benzer şekilde diğer işlemleri de gerçekleştirebilirsiniz.

API'yi ayarlar

Bir Set, yinelenen öğeler içeremeyen bir Koleksiyondur. Matematiksel küme soyutlamasını modeller. Çeşitli Sets API yöntemlerini ayrıntılı olarak inceleyelim.

d3.set([array[, accessor]])- Bu yöntem, yeni bir set oluşturmak için kullanılır. Dizi, dize değerleri eklemek için kullanılır. Erişimci isteğe bağlıdır.
set.has(value) - Bu yöntem, kümenin belirtilen değer dizesi için bir girişe sahip olup olmadığını kontrol etmek için kullanılır.
set.add(value) - Belirtilen değer dizesini sete eklemek için kullanılır.
set.remove(value) - Belirtilen değer dizesini içeren kümeyi kaldırmak için kullanılır.
set.clear() - Bu kümeden tüm değerleri kaldırır.
set.values() - Bu yöntem, kümeye bir değer dizisi döndürmek için kullanılır.
set.empty() - Yalnızca ve ancak bu kümede sıfır değerler varsa doğru döndürür.
set.size() - Bu kümedeki değerlerin sayısını döndürür.

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

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 collection API</h3>
      <script>
         var fruits =  d3.set().add("mango")
          .add("apple").add("orange");
         console.log(fruits.has("grapes")); // return false.
         console.log(fruits.remove("apple")); //true
         console.log(fruits.size());    // size is 2
         console.log(fruits.empty());   // true
      </script>
   </body>
</html>

Şimdi, tarayıcıyı isteyin ve ekranımızda aşağıdaki yanıtı göreceğiz.

Benzer şekilde diğer işlemleri de gerçekleştirebiliriz.

Nests API

Nesting API, dizideki öğeleri içerir ve hiyerarşik bir ağaç yapısında çalışır. Çeşitli Nests API yöntemlerini ayrıntılı olarak inceleyelim.

d3.nest() - Bu yöntem, yeni bir yuva oluşturmak için kullanılır.
nest.key(key)- Bu yöntem, yeni bir tuş işlevini başlatmak için kullanılır. Bu işlev, bir girdi dizisindeki her bir öğeyi çağırmak ve gruptaki öğeleri döndürmek için kullanılır.
nest.sortKeys(comparator)- Bu yöntem, belirli bir karşılaştırıcıdaki anahtarları sıralamak için kullanılır. İşlev, d3. artan veya d3. artan olarak tanımlanır.
nest.sortValues(comparator)- Bu yöntem, belirli bir karşılaştırıcıdaki değerleri sıralamak için kullanılır. Karşılaştırıcı işlevi, yaprak elemanlarını sıralar.
nest.map(array)- Bu yöntem, belirtilen diziyi uygulamak ve iç içe geçmiş bir harita döndürmek için kullanılır. Döndürülen haritadaki her girdi, birinci anahtar işlevi tarafından döndürülen farklı bir anahtar değerine karşılık gelir. Giriş değeri, kayıtlı tuş işlevlerinin sayısına bağlıdır.
nest.object(array) - Bu yöntem, yuva operatörünü belirtilen diziye uygulamak ve yuvalanmış bir nesne döndürmek için kullanılır.
nest.entries(array) - Bu yöntem, yuva operatörünü belirtilen diziye uygulamak ve bir dizi anahtar-değer girdisi döndürmek için kullanılır.

Basit bir web sayfası düşünün nest.html yukarıda tartışılan yuvalama yöntemlerini gerçekleştirmek.

Example - Şu örneği ele alalım.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 Nest API</h3>
      <script>
         var data = [
            {
               "color" : "red",
               "key" : 1
            },
            {
               "color" : "green",
               "key" : 2
            },
            {
               "color" : "blue",
               "key" : 75
            }
         ]
         var nest =  d3.nest()
            .key(function (d) { return d.color; })
            .entries(data)console.log(nest);
         var filter = nest.filter(function (d) { return d.key = = = 'red' })
         console.log(filter);
      </script>
   </body>
</html>

Şimdi, sonucu bir tarayıcıda kontrol edin ve aşağıdaki sonucu göreceğiz.

Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]

Array[1]
0: Object
length: 1
__proto__: Array[0]

Seçimler, belge nesne modelinin (DOM) güçlü veriye dayalı dönüştürmesidir. Öznitelikleri, Stilleri, Özellikleri, HTML veya Metin İçeriğini ve daha fazlasını ayarlamak için kullanılır. Bu bölümde API seçimleri ayrıntılı olarak açıklanmaktadır.

API'yi yapılandırma

API'yi doğrudan aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Seçim API Yöntemleri

Seçim API'sindeki en önemli yöntemler aşağıdadır.

d3.selection()
d3.select(selector)
d3.selectAll(selector)
selection.selectAll(selector)
selection.filter(filter)
selection.merge(other)
d3.matcher(selector)
d3.creator(name)
selection.each(function)
selection.call (işlev [, bağımsız değişkenler…])
d3.local()
local.set (düğüm, değer)
local.get(node)
local.remove(node)

Şimdi bunların her birini ayrıntılı olarak tartışalım.

d3.selection ()

Bu yöntem, kök öğeyi seçmek için kullanılır. Bu fonksiyon, seçimleri test etmek veya d3js seçimini genişletmek için de kullanılabilir.

d3.select (seçici)

Bu yöntem, belirtilen seçici dizesiyle eşleşen ilk öğeyi seçmek için kullanılır.

Example - Şu örneği ele alalım.

var body = d3.select("body");

Seçici bir dizge değilse, aşağıda tanımlanan belirtilen düğümü seçer.

d3.select("p").style("color", "red");

d3.selectAll (seçici)

Bu yöntem, belirtilen seçici dizesiyle eşleşen tüm öğeleri seçer.

Example - Şu örneği ele alalım.

var body = d3.selectAll("body");

Seçici bir dizge değilse, aşağıda tanımlanan belirtilen düğüm dizisini seçer.

d3.selectAll("body").style("color", "red");

selection.selectAll (seçici)

Bu yöntem, bir eleman seçmek için kullanılır. Belirtilen seçici dizeyle eşleşen alt öğeleri seçer. Döndürülen seçimdeki öğeler, bu seçimde karşılık gelen üst düğümlerine göre gruplandırılır. Geçerli öğe için belirtilen seçiciyle hiçbir öğe eşleşmezse veya seçici boşsa, geçerli dizindeki grup boş olacaktır.

Example - Şu örneği ele alalım.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtre)

Bu yöntem, yalnızca belirtilen filtrenin doğru olduğu öğeleri içeren yeni bir seçim döndürerek seçimi filtrelemek için kullanılır.

Example - Şu örneği ele alalım.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Burada, bir dizi tablo satırını filtrelemek yalnızca tek döndürür.

selection.merge (diğer)

Bu yöntem, belirtilen diğer seçimle birleşerek yeni bir seçim döndürmek için kullanılır.

Example - Şu örneği ele alalım.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (seçici)

Bu yöntem, belirtilen seçiciyi atamak için kullanılır. True döndüren bir işlev döndürür.

Example - Şu örneği ele alalım.

var p = selection.filter(d3.matcher("p"));

d3.creator (ad)

Bu yöntem, belirtilen eleman ismini atamak için kullanılır. Bu, ana eleman olduğunu varsayarak, verilen isimde bir eleman oluşturan bir fonksiyon döndürür.

Example - Şu örneği ele alalım.

selection.append(d3.creator("p"));

selection.each (işlev)

Bu yöntem, seçilen her bir öğe için belirtilen işlevi geçerli veri (d), geçerli dizin (i) ve geçerli DOM öğesi (düğümler [i) ile birlikte geçerli grup (düğümler) tarafından geçirilen sırada çağırmak için kullanılır. ]). Aşağıda açıklanmıştır.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (işlev [, bağımsız değişkenler…])

Belirtilen işlevi tam olarak bir kez çağırmak için kullanılır. Sözdizimi aşağıda gösterilmiştir.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Bu yöntem aşağıda gösterildiği gibi belirtilebilir.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local, verilerden bağımsız olan yerel durumu tanımlamanıza izin verir.

Example - Şu örneği ele alalım.

var data = d3.local();

Var'ın aksine, her yerelin değeri de DOM tarafından belirlenir.

local.set (düğüm, değer)

Bu yöntem, belirtilen düğümdeki bu yerelin değerini değere ayarlar.

Example - Şu örneği ele alalım.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Bu yöntem, belirtilen düğümdeki bu yerelin değerini döndürür. Düğüm bu yerel noktayı tanımlamazsa, onu tanımlayan en yakın atadan gelen değeri döndürür.

local.remove (düğüm)

Bu yöntem, bu yerelin değerini belirtilen düğümden siler. Düğüm tanımlanmışsa true, aksi takdirde false döndürür.

Yollar, Dikdörtgenler, Daireler, Elipsler, Çoklu Çizgiler, Çokgenler, Düz Çizgiler ve Eğriler çizmek için kullanılır. SVG Yolları, Konturlu, Dolu, Kırpma Yolu Olarak Kullanılabilen veya üçünün herhangi bir kombinasyonu olabilen bir şeklin anahatlarını temsil eder. Bu bölümde Paths API ayrıntılı olarak açıklanmaktadır.

Yolları Yapılandırma

Paths API'yi aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Paths API Yöntemleri

En sık kullanılan Paths API yöntemlerinden bazıları aşağıda kısaca açıklanmıştır.

d3.path() - Bu yöntem, yeni bir yol oluşturmak için kullanılır.
path.moveTo(x, y) - Bu yöntem, belirtilen x ve y değerlerini taşımak için kullanılır.
path.closePath() - Bu yöntem, mevcut yolu kapatmak için kullanılır.
path.lineTo(x, y) - Bu yöntem, geçerli noktadan tanımlanan x, y değerlerine doğru bir çizgi oluşturmak için kullanılır.
path.quadraticCurveTo(cpx, cpy, x, y) - Bu yöntem, geçerli noktadan belirtilen noktaya ikinci dereceden bir eğri çizmek için kullanılır.
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - Bu yöntem, geçerli noktadan belirtilen noktaya bir bezier eğrisi çizmek için kullanılır.
path.arcTo(x1, y1, x2, y2, radius) - Bu yöntem, geçerli noktadan belirli bir noktaya (x1, y1) dairesel bir yay çizmek ve çizgiyi belirtilen noktalar (x1, y1) ve (x2, y2) arasında sonlandırmak için kullanılır.
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])- Bu yöntem, belirtilen merkeze (x, y), yarıçapa, startAngle ve endAngle'a dairesel bir yay çizmek için kullanılır. Saat yönünün tersine değer doğruysa yay, saat yönünün tersine, aksi takdirde saat yönünde çizilir.
path.rect(x, y, w, h)- Bu yöntem, yalnızca dört noktayı (x, y), (x + w, y), (x + w, y + h), (x, y + h) içeren yeni alt yol oluşturmak için kullanılır. Düz çizgilerle birbirine bağlanan bu dört nokta alt yolu kapalı olarak işaretler. Context.rect'e eşdeğerdir ve SVG'nin "lineto" komutlarını kullanır.
path.toString() - SVG'nin yol verisi spesifikasyonuna göre bu yolun dize temsilini döndürür.

Misal

Yol API'sini kullanarak D3'te basit bir çizgi çizelim. Bir web sayfası oluşturunlinepath.html ve aşağıdaki değişiklikleri ekleyin.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki sonucu göreceğiz.

D3.js, veri dönüşümlerini gerçekleştirmek için ölçek işlevleri sağlar. Bu işlevler, bir giriş alanını bir çıkış aralığına eşler.

API'yi Yapılandırma

API'yi doğrudan aşağıdaki komut dosyasını kullanarak yapılandırabiliriz.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

API Yöntemlerini Ölçekler

D3, farklı grafik türleri için aşağıdaki önemli ölçeklendirme yöntemlerini sağlar. O halde ayrıntılı olarak anlayalım.

d3.scaleLinear() - Belirtilen çıktı aralığına veri (alan) eşlemlerini girebileceğimiz sürekli bir doğrusal ölçek oluşturur.
d3.scaleIdentity() - Giriş verilerinin çıktıyla aynı olduğu doğrusal bir ölçek oluşturun.
d3.scaleTime() - Giriş verilerinin tarihlerde ve çıktının sayılarda olduğu doğrusal bir ölçek oluşturun.
d3.scaleLog() - Logaritmik bir ölçek oluşturun.
d3.scaleSqrt() - Bir karekök ölçeği oluşturun.
d3.scalePow() - Üstel bir ölçek oluşturun.
d3.scaleSequential() - Çıkış aralığının enterpolatör işlevi ile sabitlendiği sıralı bir ölçek oluşturun.
d3.scaleQuantize() - Ayrık çıktı aralığına sahip bir niceleme ölçeği oluşturun.
d3.scaleQuantile() - Giriş örnek verilerinin ayrık çıkış aralığı ile eşleştiği bir nicelik ölçeği oluşturun.
d3.scaleThreshold() - Rasgele giriş verilerinin ayrık çıkış aralığı ile eşleştiği bir ölçek oluşturun.
d3.scaleBand() - Bant ölçekleri, çıkış aralığının sürekli ve sayısal olması dışında sıra ölçekleri gibidir.
d3.scalePoint() - Bir puan ölçeği oluşturun.
d3.scaleOrdinal() - Giriş verilerinin alfabe içerdiği ve ayrık sayısal çıktı aralığına eşlendiği bir sıra ölçeği oluşturun.

Çalışan bir örnek yapmadan önce, önce aşağıdaki iki terimi anlayalım -

Domain - Etki Alanı, giriş verilerinizin minimum ve maksimum değerlerini belirtir.
Range - Aralık, giriş değerlerinin eşlenmesini istediğimiz çıkış aralığıdır ...

Çalışma Örneği

Bu örnekte d3.scaleLinear işlevini gerçekleştirelim. Bunu yapmak için aşağıdaki adımlara uymanız gerekir -

Step 1 - Define variables - Aşağıdaki kodlamayı kullanarak SVG değişkenlerini ve verilerini tanımlayın.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - Create linear scale - Doğrusal bir ölçek oluşturmak için aşağıdaki kodu kullanın.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Burada, alan adımızın minimum ve maksimum değeri için manuel olarak yerleşik olarak kullanabiliriz. d3.min() ve d3.max() veri dizimizden sırasıyla minimum ve maksimum değerleri döndürecek işlevler.

Step 3 - Append SVG attributes - Aşağıda verilen kodu kullanarak SVG öğelerini ekleyin.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Step 4 - Apply transformation - Aşağıdaki kodu kullanarak dönüşümü uygulayın.

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

Step 5 - Append rect elements - Aşağıda gösterildiği gibi ölçeklendirmeye dikdörtgen öğeleri ekleyin.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - Display data - Şimdi aşağıda verilen kodlamayı kullanarak verileri görüntüleyin.

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

Step 7 - Working Example - Şimdi, aşağıdaki gibi d3.scaleLinear () işlevini kullanarak bir çubuk grafik oluşturalım.

Bir "scales.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>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

Yukarıdaki kod, tarayıcıda aşağıdaki sonucu gösterecektir.

D3, eksen çizme işlevleri sağlar. Bir eksen Çizgiler, Keneler ve Etiketlerden oluşur. Eksen bir Ölçek kullanır, bu nedenle her eksene birlikte çalışmak için bir ölçek verilmesi gerekir.

Axis API'yi Yapılandırma

API'yi aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Eksen API Yöntemleri

D3, eksenleri çizmek için aşağıdaki önemli işlevleri sağlar. Aşağıda kısaca açıklanmıştır.

d3.axisTop() - Bu yöntem, bir üst yatay eksen oluşturmak için kullanılır.
d3.axisRight() - Bu yöntem dikey bir sağa dönük eksen oluşturmak için kullanılır.
d3.axisBottom() - Bu yöntem, bir alt yatay eksen oluşturmak için kullanılır.
d3.axisLeft() - Sol dikey ekseni oluşturur.

Çalışma Örneği

X ve y eksenini bir grafiğe nasıl ekleyeceğimizi öğrenelim. Bunu yapmak için aşağıda verilen adımlara uymamız gerekiyor.

Step 1 - Define variables - Aşağıdaki kodu kullanarak SVG ve veri değişkenlerini tanımlayın.

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 2 - Create a scale linear function - Aşağıda tanımlandığı gibi hem x hem de y ekseni için bir ölçek doğrusal işlevi oluşturun.

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

Burada doğrusal bir ölçek oluşturduk ve alanı ve aralığı belirledik.

Step 3 - Add scales to x-axis - Şimdi aşağıdaki kodu kullanarak x eksenine ölçek ekleyebiliriz.

var x_axis = d3.axisBottom()
   .scale(xscale);

Burada, x eksenimizi oluşturmak ve ona daha önce tanımlanan ölçeği sağlamak için d3.axisBottom kullanıyoruz.

Step 4 - Add scales to the y-axis - Y eksenine ölçek eklemek için aşağıdaki kodu kullanın.

var y_axis = d3.axisLeft()
   .scale(yscale);

Burada, y eksenimizi oluşturmak ve ona yukarıda tanımladığımız ölçeği sağlamak için d3.axisLeft'i kullanıyoruz.

Step 5 - Apply transformation - Bir grup öğesi ekleyebilir ve aşağıda tanımlanan x, y eksenini ekleyebilirsiniz.

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

Step 6 - Append group elements - Aşağıdaki kodu kullanarak geçiş ve grup öğelerini uygulayın.

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

Step 7 - Working Example- Tam kod listesi aşağıdaki kod bloğunda verilmiştir. Bir web sayfası oluşturunaxes.html ve aşağıdaki değişiklikleri ekleyin.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
    
         var x_axis = d3.axisBottom().scale(xscale);
         
         var y_axis = d3.axisLeft().scale(yscale);
         
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         
         var xAxisTranslate = height/2 + 10;
         
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki değişiklikleri göreceğiz.

Bu bölümde D3.js'deki farklı şekil oluşturucular anlatılmaktadır.

API'yi Yapılandırma

Shapes API'sini aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Şekiller Üreteçleri

D3.js farklı şekilleri destekler. Öne çıkan şekillerden detaylı bir şekilde geçelim.

Arcs API

Ark üreteci bir daire veya halka şekli oluşturur. Bu API yöntemlerini önceki pasta grafikler bölümünde kullandık. Çeşitli Arcs API yöntemlerini ayrıntılı olarak anlayalım.

d3.arc() - Bu yöntem, yeni bir ark üreteci oluşturmak için kullanılır.
arc(args)- Belirtilen argümanlarla bir yay oluşturmak için kullanılır. Nesne yarıçapları ve açıları ile varsayılan ayarlar aşağıda tanımlanmıştır.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

arc.centroid(args) - Bu yöntem, yayın merkez çizgisinin orta noktasını [x, y] belirtilen bağımsız değişkenlerle hesaplamak için kullanılır.
arc.innerRadius([radius])- Bu yöntem, verilen yarıçaptan iç yarıçapı ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıda tanımlanmıştır -

function innerRadius(d) {
   return d.innerRadius;
}

arc.outerRadius([radius])- Bu yöntem, verilen yarıçaptan dış yarıçapı ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıdaki gibi tanımlanır.

function outerRadius(d) {
   return d.outerRadius;
}

arc.cornerRadius([radius])- Bu yöntem, verilen yarıçaptan köşe yarıçapını ayarlamak ve bir ark üreteci döndürmek için kullanılır. Aşağıdaki gibi tanımlanır.

function cornerRadius() {
   return 0;
}

Köşe yarıçapı sıfırdan büyükse, yayın köşeleri, verilen yarıçapın daireleri kullanılarak yuvarlanır. Köşe yarıçapı (dış Yarıçap - iç Yarıçap) / 2'den büyük olamaz.

arc.startAngle([angle])- Bu yöntem, başlangıç açısını verilen açıdan işleve ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır -

function startAngle(d) {
   return d.startAngle;
}

arc.endAngle([angle])- Bu yöntem, bitiş açısını belirli bir açıdan fonksiyona ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function endAngle(d) {
   return d.endAngle;
}

arc.padAngle([angle])- Bu yöntem, ped açısını verilen açıdan fonksiyona ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function padAngle() {
   return d && d.padAngle;
}

(x) arc.padRadius([radius])- Bu yöntem, ped yarıçapını verilen yarıçaptan belirtilen işleve ayarlamak için kullanılır. Ped yarıçapı, padRadius * padAngle olarak tanımlanan, bitişik yayları ayıran sabit doğrusal mesafeyi belirler.
(xi) arc.context([context]) - Bu yöntem, içeriği ayarlamak ve bir ark oluşturucuyu döndürmek için kullanılır.

Pies API

Bu API, bir Pasta oluşturucu oluşturmak için kullanılır. Bu API yöntemlerini önceki bölümde uyguladık. Tüm bu yöntemleri ayrıntılı olarak tartışacağız.

d3.pie() - Varsayılan ayarlarla yeni bir pasta oluşturucu oluşturur.
pie(data[, arguments])- Bu yöntem, verilen dizi değerleri için bir pasta oluşturmak için kullanılır. Bir dizi nesne döndürür. Nesneler, datumun yay açılarıdır. Her nesne aşağıdaki özelliklere sahiptir -
- data- giriş verisi; giriş veri dizisindeki ilgili eleman.
- value - yayın sayısal değeri.
- index - yayın indeksi.
- startAngle - yayın başlangıç açısı.
- endAngle - yayın bitiş açısı.
- padAngle - arkın ped açısı.
pie.value([value])- Bu yöntem, değeri belirtilen işleve ayarlamak ve bir pasta oluşturmak için kullanılır. Aşağıdaki gibi tanımlanır -

function value(d) {
   return d;
}

pie.sort([compare])- Bu yöntem, verileri belirtilen işleve göre sıralamak ve pasta oluşturmak için kullanılır. Karşılaştırıcı işlevi aşağıdaki gibi tanımlanır.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Burada karşılaştırma işlevi, her biri girdi veri dizisinden gelen 'a' ve 'b' olmak üzere iki bağımsız değişken alır. 'A' yayı 'b' yayından önce olması gerekiyorsa, karşılaştırıcının sıfırdan küçük bir sayı döndürmesi gerekir. 'A' yayı 'b' yayından sonra olması gerekiyorsa, karşılaştırıcı sıfırdan büyük bir sayı döndürmelidir.

pie.sortValues([compare])- Bu yöntem, verilen işlevin değerini karşılaştırmak ve bir pasta oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function compare(a, b) {
   return b - a;
}

pie.startAngle([angle])- Bu yöntem, pastanın başlangıç açısını belirtilen işleve ayarlamak için kullanılır. Açı belirtilmezse, geçerli başlangıç açısını döndürür. Aşağıdaki gibi tanımlanır.

function startAngle() {
   return 0;
}

pie.endAngle([angle])- Bu yöntem, pastanın bitiş açısını belirtilen işleve ayarlamak için kullanılır. Açı belirtilmezse, geçerli bitiş açısını döndürür. Aşağıdaki gibi tanımlanır.

function endAngle() {
   return 2 * Math.PI;
}

pie.padAngle([angle])- Bu yöntem, ped açısını belirtilen işleve ayarlamak ve pastayı oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function padAngle() {
   return 0;
}

Hatlar API'si

Hatlar API'si bir hat oluşturmak için kullanılır. Bu API yöntemlerini,Graphsbölüm. Her yöntemi ayrıntılı olarak inceleyelim.

d3.line() - Bu yöntem, yeni bir hat üreteci oluşturmak için kullanılır.
line(data) - Bu yöntem, verilen veri dizisi için bir satır oluşturmak için kullanılır.
line.x([x])- Bu yöntem, x erişimcisini belirtilen işleve ayarlamak ve bir satır oluşturmak için kullanılır. Fonksiyon aşağıda tanımlanmıştır,

function x(d) {
   return d[0];
}

line.y([y])- Bu yöntem, 'y' erişimcisini belirtilen işleve ayarlamak ve bir satır oluşturmak için kullanılır. Fonksiyon aşağıdaki gibi tanımlanır.

function y(d) {
   return d[1];
}

line.defined([defined])- Bu yöntem, tanımlanan erişimciyi belirtilen işleve ayarlamak için kullanılır. Aşağıdaki gibi tanımlanır.

function defined() {
  return true;
}

line.curve([curve]) - Eğriyi ayarlamak ve çizgiyi oluşturmak için kullanılır.
line.context([context])- Bu yöntem, bağlamı ayarlamak ve bir satır oluşturmak için kullanılır. Bağlam belirtilmezse, null döndürür.
d3.lineRadial()- Bu yöntem, yeni radyal çizgi oluşturmak için kullanılır; Kartezyen hat üretecine eşdeğerdir.
lineRadial.radius([radius])- Bu yöntem bir radyal çizgi çizmek için kullanılır ve erişimci yarıçapı döndürür. Başlangıç noktasından (0,0) uzaklık alır.

Sonraki bölümde, D3.js'deki Renkler API'sini öğreneceğiz.

Renkler, KIRMIZI, YEŞİL ve MAVİ'yi birleştirerek görüntülenir. Renkler aşağıdaki farklı şekillerde belirtilebilir -

Renk adlarına göre
RGB değerleri olarak
Onaltılık değerler olarak
HSL değerleri olarak
HWB değerleri olarak

D3-color API, çeşitli renkler için temsiller sağlar. API'de dönüştürme ve manipülasyon işlemlerini gerçekleştirebilirsiniz. Gelin bu işlemleri detaylı olarak anlayalım.

API'yi Yapılandırma

Aşağıdaki komut dosyasını kullanarak API'yi doğrudan yükleyebilirsiniz.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script>

</script>

Temel işlemler

D3'teki temel renk işlemlerinden geçelim.

Convert color value to HSL - Renk değerini HSL'ye dönüştürmek için aşağıdakileri kullanın Example -

var convert = d3.hsl("green");

Tonu aşağıda gösterildiği gibi 45 ° döndürebilirsiniz.

convert.h + =  45;

Benzer şekilde, doygunluk seviyesini de değiştirebilirsiniz. Renk değerini soldurmak için, opaklık değerini aşağıda gösterildiği gibi değiştirebilirsiniz.

convert.opacity = 0.5;

Color API Yöntemleri

Aşağıda en önemli Color API Yöntemlerinden bazıları verilmiştir.

d3.color(specifier)
color.opacity
color.rgb()
color.toString()
color.displayable()
d3.rgb(color)
d3.hsl(color)
d3.lab(color)
d3.hcl(color)
d3.cubehelix(color)

Bu Color API Yöntemlerinin her birini ayrıntılı olarak anlayalım.

d3.color (tanımlayıcı)

Belirtilen CSS rengini ayrıştırmak ve RGB veya HSL rengini döndürmek için kullanılır. Belirteç verilmemişse, null döndürülür.

Example - Şu örneği ele alalım.

<script>
   var color = d3.color("green");  // asign color name directly
   console.log(color);
</script>

Ekranımızda şu yanıtı göreceğiz -

{r: 0, g: 128, b: 0, opacity: 1}

color.opacity

Rengi soldurmak istiyorsak, opaklık değerini değiştirebiliriz. [0, 1] aralığındadır.

Example - Şu örneği ele alalım.

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

Ekranda şu yanıtı göreceğiz -

color.rgb ()

Renk için RGB değerini döndürür. Aşağıdaki örneği ele alalım.

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

Ekranımızda aşağıdaki yanıtı göreceğiz.

{r: 0, g: 128, b: 0, opacity: 1}

color.toString ()

Rengi CSS Nesne Modeli spesifikasyonuna göre temsil eden bir dize döndürür. Aşağıdaki örneği ele alalım.

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

Ekranımızda aşağıdaki yanıtı göreceğiz.

rgb(0, 128, 0)

color.displayable ()

Renk görüntülenebilir ise true döner. RGB renk değeri 0'dan küçük veya 255'ten büyükse ya da opaklık [0, 1] aralığında değilse yanlış döndürür. Aşağıdaki örneği ele alalım.

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

Ekranımızda aşağıdaki yanıtı göreceğiz.

true

d3.rgb (renkli)

Bu yöntem, yeni bir RGB rengi oluşturmak için kullanılır. Aşağıdaki örneği ele alalım.

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

Ekranda aşağıdaki yanıtı göreceğiz.

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl (renkli)

Yeni bir HSL rengi oluşturmak için kullanılır. Değerler, döndürülen örnekte h, s ve l özellikleri olarak gösterilir. Aşağıdaki örneği ele alalım.

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

Ekranda aşağıdaki yanıtı göreceğiz.

330
0.5

d3.lab (renkli)

Yeni bir Lab rengi oluşturur. Kanal değerleri, döndürülen örnekte "l", "a" ve "b" özellikleri olarak gösterilir.

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

Ekranda aşağıdaki yanıtı göreceğiz.

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl (renkli)

Yeni bir HCL rengi oluşturur. Kanal değerleri, döndürülen örnekte h, c ve l özellikleri olarak gösterilir. Aşağıdaki örneği ele alalım.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Ekranda aşağıdaki yanıtı göreceğiz.

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix (renkli)

Yeni bir Cubehelix rengi oluşturur. Değerler, döndürülen örnekte h, s ve l özellikleri olarak gösterilir. Aşağıdaki örneği ele alalım.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Ekranda şu yanıtı göreceğiz,

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

Çalışma Örneği

Yeni bir web sayfası oluşturalım - color.htmltüm renk API yöntemlerini gerçekleştirmek için. Tam kod listesi aşağıda tanımlanmıştır.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

D3 Geçişleri, bir dizi öğe ve her öğe için; elemanın mevcut tanımının bir kısmına geçiş uygular.

API'yi Yapılandırma

Aşağıdaki komut dosyasını kullanarak geçiş API'sini yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Geçiş API Yöntemleri

Geçiş API yöntemlerini detaylı olarak inceleyelim.

Elemanların Seçilmesi

Çeşitli seçim unsurlarını ayrıntılı olarak tartışalım.

selection.transition([name])- Bu yöntem, adla yeni bir seçim geçişi döndürmek için kullanılır. Bir isim belirtilmezse null döndürür.
selection.interrupt([name]) - Bu yöntem, geçişin seçilen öğelerini adla kesmek için kullanılır ve aşağıda tanımlanmıştır.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - Bu yöntem, belirtilen adın belirtilen düğümde geçişini kesmek için kullanılır.
d3.transition([name]) - Bu yöntem, belirtilen adla yeni bir geçiş döndürmek için kullanılır.
transition.select(selector) - Bu yöntem, belirtilen seçiciyle eşleşen ilk öğeyi seçmek için kullanılır ve aşağıda tanımlanan sonuç seçimde bir geçiş döndürür.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- Bu yöntem, belirtilen seçiciyle eşleşen tüm öğeleri seçmek için kullanılır ve elde edilen seçimde bir geçiş döndürür. Aşağıda tanımlanmıştır -

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - Bu yöntem, belirtilen filtre ile eşleşen elemanları seçmek için kullanılır, aşağıda tanımlanmıştır.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- Bu yöntem, geçişi diğer geçişlerle birleştirmek için kullanılır. Aşağıda tanımlanmıştır.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- Bu yöntem, seçilen öğelerde yeni bir geçiş döndürmek için kullanılır. Geçiş durduğunda başlaması planlanıyor. Yeni geçiş, bu geçişin adını, süresini ve hareket hızını devralır.

Example - Şu örneği ele alalım.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Burada vücut sararır ve son geçişten sadece beş saniye önce başlar.

d3.active(node[, name]) - Bu yöntem, adı belirtilen düğümdeki geçişi döndürmek için kullanılır.

Zamanlama Yöntemleri

Geçiş zamanlaması API yöntemlerini ayrıntılı olarak inceleyelim.

transition.delay([value])- Bu yöntem, geçiş gecikmesini belirtilen değere ayarlamak için kullanılır. Seçilen her öğe için bir işlev değerlendirilirse, geçerli DOM öğesi bağlamıyla birlikte geçerli veri 'd' ve dizin 'i' 'ye aktarılır. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğe için gecikmenin geçerli değerini döndürür. Aşağıda tanımlanmıştır,

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- Bu yöntem, geçiş süresini belirtilen değere ayarlamak için kullanılır. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğenin süresinin geçerli değerini döndürür.
transition.ease([value])- Bu yöntem, seçilen öğeler için geçiş değerini kolaylaştırmak için kullanılır. Hareket hızı işlevi, animasyonun her karesi için çağrılır ve [0, 1] aralığında normalleştirilmiş "t" süresini geçer. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğe için geçerli hareket hızı işlevini döndürür.

Bir sonraki bölümde, d3.js'de sürükle ve bırak kavramını tartışacağız.

Sürükle ve bırak, d3.js'deki en bilinen kavramlardan biridir. Bu bölüm sürüklemeyi ve yöntemlerini ayrıntılı olarak açıklamaktadır.

Kurulum

Aşağıdaki komut dosyasını kullanarak doğrudan API'yi dahil edebiliriz.

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

API Yöntemlerini Sürükleme

Aşağıda, D3.js'deki en önemli sürükleme API yöntemlerinden bazıları verilmiştir.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (typenames, [dinleyici])
d3.dragDisable(window)
d3.dragEnable (pencere [, noclick])

Şimdi bunların her birini ayrıntılı olarak anlayalım.

d3.drag ()

Bu yöntem, yeni bir sürükleme oluşturmak için kullanılır. Aşağıdaki komut dosyasını kullanarak bu yöntemi çağırabilirsiniz.

<script>
   var drag = d3.drag();
</script>

sürükleyin (seçim)

Bu yöntem, sürüklemeyi belirtilen seçime uygulamak için kullanılır. Bu işlevi kullanarak çalıştırabilirsinizselection.call. Aşağıda basit bir örnek tanımlanmıştır.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Burada, seçili öğelere uygulanan sürükleme davranışı selection.call yoluyladır.

drag.container([container])

Kabı sürüklemek için belirtilen işleve ayarlamak için kullanılır. Bir kap belirtilmezse, mevcut erişimciyi döndürür. Herhangi bir grafik öğesini bir Canvas ile sürüklemek için, kabı kendisi olarak yeniden tanımlayabilirsiniz. Aşağıda tanımlanmıştır.

function container() {
   return this;
}

sürükle.filter ([filtre])

Belirtilen işlev için filtreyi ayarlamak için kullanılır. Filtre belirtilmezse, aşağıda tanımlandığı gibi mevcut filtreyi döndürür.

function filter() {
   return !d3.event.button;
}

drag.subject ([konu])

Konuyu sürüklemek için belirtilen işleve ayarlamak için kullanılır ve aşağıda tanımlanmıştır.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

Burada özne, sürüklenen şeyi temsil eder. Örneğin, SVG'de dikdörtgen öğeleri sürüklemek istiyorsanız, varsayılan konu, sürüklenmekte olan dikdörtgenin verisidir.

drag.clickDistance ([mesafe])

Bu yöntem, bir fareyi aşağı çekme ve fareyi kaldırma olayına tıklama için maksimum mesafeyi ayarlamak için kullanılır. Mesafe belirtilmezse, sıfıra işaret eder.

drag.on (typenames, [dinleyici])

Bu yöntem, sürükleme için belirtilen tip adları için olay dinleyicisini ayarlamak için kullanılır. Tür adları, boşlukla ayrılmış bir veya daha fazla tür adı içeren bir dizedir. Her tür adı, isteğe bağlı olarak bir nokta (.) Ve sürükle.bir ve iki sürükleme gibi bir ad izleyen bir türdür. Bu tür aşağıdakilerden birinden olmalıdır -

start - yeni bir işaretçi başlatır.
drag - etkin bir işaretçiyi sürükler.
end - Etkin olmayan bir işaretçiyi devre dışı bırakın.

d3.dragDisable (pencere)

Bu yöntem, sürükle ve bırak seçimini devre dışı bırakmak için kullanılır. Fare düşürme olay eylemini engeller. Seçilen tarayıcıların çoğu bu eylemi varsayılan olarak destekler. Desteklenmiyorsa, CSS özelliğini hiçbiri olarak ayarlayabilirsiniz.

d3.dragEnable (pencere [, noclick])

Bu yöntem, belirtilen pencere konumunda sürükle ve bırak seçimini etkinleştirmek için kullanılır. Mouseup olay eylemini çağırmak için kullanılır. Noclick değerinin true olduğunu atarsanız, tıklama olayının süresi sıfır milisaniye zaman aşımına uğrar.

Sürükleme API'si - Olayları Sürükleme

Sürükleme olayını ayarlamak için D3.event yöntemi kullanılır. Aşağıdaki alanlardan oluşur -

Target - Sürükleme davranışını temsil eder.
Type - Bu bir dizedir ve şunlardan biri olabilir - "başlangıç", "sürükleme" veya "bitiş".
Subject - Drag.subject ile tanımlanan sürükleme konusu.

event.on (tür adları, [dinleyici])

Olay nesnesi, sürükleme işlemini gerçekleştirmek için event.on yöntemini ortaya çıkarır. Aşağıdaki gibi tanımlanır.

d3.event.on("drag", dragged).on("end", ended);

Yakınlaştırma, içeriğinizi ölçeklendirmenize yardımcı olur. Tıkla ve sürükle yaklaşımını kullanarak belirli bir bölgeye odaklanabilirsiniz. Bu bölümde, Yakınlaştırma API'sini ayrıntılı olarak tartışacağız.

API'yi Yapılandırma

Yakınlaştırma API'sini aşağıdaki komut dosyasını kullanarak doğrudan "d3js.org" dan yükleyebilirsiniz.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Yakınlaştırma API Yöntemleri

Aşağıda en sık kullanılan Yakınlaştırma API Yöntemlerinden bazıları verilmiştir.

d3.zoom()
zoom(selection)
zoom.transform (seçim, dönüştürme)
zoom.translateBy (seçim, x, y)
zoom.translateTo (seçim, x, y)
zoom.scaleTo (seçim, k)
zoom.scaleBy (seçim, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (typenames [, dinleyici])

Kısaca tüm bu Zooming API yöntemlerinden geçelim.

d3.zoom ()

Yeni bir yakınlaştırma davranışı yaratır. Aşağıdaki komut dosyasını kullanarak ona erişebiliriz.

<script>
   var zoom = d3.zoom();
</script>

yakınlaştır (seçim)

Yakınlaştırma dönüşümünü seçilen bir öğeye uygulamak için kullanılır. Örneğin, aşağıdaki sözdizimini kullanarak bir mousedown.zoom davranışını başlatabilirsiniz.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (seçim, dönüştürme)

Seçilen elemanların geçerli yakınlaştırma dönüşümünü belirtilen dönüşüme ayarlamak için kullanılır. Örneğin, aşağıdaki sözdizimini kullanarak yakınlaştırma dönüşümünü kimlik dönüşümüne sıfırlayabiliriz.

selection.call(zoom.transform, d3.zoomIdentity);

Aşağıdaki sözdizimini kullanarak yakınlaştırma dönüşümünü kimlik dönüşümüne 1000 milisaniye için sıfırlayabiliriz.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (seçim, x, y)

Seçilen elemanların mevcut yakınlaştırma dönüşümünü x ve y değerlerine çevirmek için kullanılır. X ve y çeviri değerlerini sayı olarak veya sayı döndüren işlevler olarak belirtebilirsiniz. Seçilen öğe için bir işlev çağrılırsa, bu, DOM için geçerli veri 'd' ve dizin 'i' içinden geçirilir. Aşağıda örnek bir kod tanımlanmıştır.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (seçim, x, y)

Seçilen elemanların mevcut yakınlaştırma dönüşümünü x ve y'nin belirtilen konumuna çevirmek için kullanılır.

zoom.scaleTo (seçim, k)

Seçilen öğelerin mevcut yakınlaştırma dönüşümünü ölçeklendirmek için kullanılır. k. Buraya,k sayılar veya işlevler olarak belirtilen bir ölçek faktörüdür.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (seçim, k)

Seçilen elemanların mevcut zoon dönüşümünü ölçeklemek için kullanılır. k. Buraya,k sayı olarak veya sayı döndüren işlevler olarak belirtilen bir ölçek faktörüdür.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filtre])

Yakınlaştırma davranışı için filtreyi belirtilen işleve ayarlamak için kullanılır. Filtre belirtilmezse, aşağıda gösterildiği gibi mevcut filtreyi döndürür.

function filter() {
   return !d3.event.button;
}

zoom.wheelDelta ([delta])

Değeri Δtekerlek delta işlevi tarafından döndürülür. Delta belirtilmezse, geçerli tekerlek delta işlevini döndürür.

zoom.extent ([kapsam])

Belirtilen dizi noktalarının kapsamını ayarlamak için kullanılır. Kapsam belirtilmezse, varsayılan olarak [[0, 0], [genişlik, yükseklik]] olan geçerli kapsam erişimcisini döndürür; burada genişlik, öğenin istemci genişliğidir ve yükseklik, istemci yüksekliğidir.

zoom.scaleExtent ([kapsam])

Ölçek kapsamını belirtilen sayı dizisine [k0, k1] ayarlamak için kullanılır. Buraya,k0izin verilen minimum ölçek faktörüdür. Süre,k1izin verilen maksimum ölçek faktörüdür. Kapsam belirtilmezse, varsayılan olarak [0, ∞] olan geçerli ölçek kapsamını döndürür. Aşağıda tanımlanan örnek kodu düşünün.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

Kullanıcı, ölçek kapsamının ilgili sınırındayken, dönerek yakınlaştırmayı deneyebilir. Ölçek kapsamına bakılmaksızın tekerlek girişinde kaydırmayı önlemek istiyorsak, tarayıcının varsayılan davranışını önlemek için bir tekerlek olay dinleyicisi kaydedin.

zoom.translateExtent ([kapsam])

Kapsam belirtilirse, çeviri kapsamını belirtilen nokta dizisine ayarlar. Kapsam belirtilmezse, varsayılan olarak [[-∞, -∞], [+ ∞, + ∞]] olan geçerli çeviri kapsamını döndürür.

zoom.clickDistance ([mesafe])

Bu yöntem, yakınlaştırılabilir alanın yukarı ve aşağı arasında hareket edebileceği maksimum mesafeyi ayarlamak için kullanılır; bu, sonraki bir tıklama olayını tetikler.

zoom.duration ([süre])

Bu yöntem, çift tıklama ve belirtilen milisaniye sayısına çift dokunma sırasında yakınlaştırma geçişlerinin süresini ayarlamak için kullanılır ve yakınlaştırma davranışını döndürür. Süre belirtilmezse, aşağıda tanımlanan varsayılan olarak 250 milisaniye olan geçerli süreyi döndürür.

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolate])

Bu yöntem, belirtilen işleve yakınlaştırma geçişleri için enterpolasyon yapmak için kullanılır. Enterpolate belirtilmezse, varsayılan olarak d3.interpolateZoom olan geçerli enterpolasyon fabrikasını döndürür.

zoom.on (typenames [, dinleyici])

Dinleyici belirtilirse, belirtilen tür adları için olay dinleyicisini ayarlar ve yakınlaştırma davranışını döndürür. Tür adları, boşlukla ayrılmış bir veya daha fazla tür adı içeren bir dizedir. Her tür adı, isteğe bağlı olarak bir nokta (.) Ve yakınlaştırma.bir ve yakınlaştır.saniye gibi bir addan oluşan bir türdür. Ad, aynı tür için birden çok dinleyicinin kaydedilmesine izin verir. Bu tür aşağıdakilerden biri olmalıdır -

Start - yakınlaştırma başladıktan sonra (fare aşağıdayken olduğu gibi).
Zoom - yakınlaştırma dönüşümünde bir değişiklikten sonra (fare hareketinde olduğu gibi).
End - yakınlaştırma bittikten sonra (örneğin fareyle yukarı kaldırıldığında).

Bir sonraki bölümde, D3.js'de farklı istek API'sini tartışacağız.

D3.js, XMLHttpRequest'i gerçekleştirmek için bir istek API'si sağlar. Bu bölüm çeşitli API isteklerini ayrıntılı olarak açıklamaktadır.

XMLHttpRequest

XMLHttpRequest, tarayıcı XMLHttpRequest nesnesini taklit etmek için yerleşik http istemcisidir. Tarayıcıların kodun yeniden kullanımını iyileştirmesi ve mevcut kitaplıkların kullanımına izin vermesi için tasarlanmış JS ile kullanılabilir.

Modülü projenize dahil edebilir ve aşağıda açıklandığı gibi tarayıcı tabanlı XHR nesnesi olarak kullanabilirsiniz.

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

Hem eşzamansız hem de eşzamanlı istekleri destekler ve GET, POST, PUT ve DELETE isteklerini gerçekleştirir.

İstekleri Yapılandırma

Aşağıdaki komut dosyasını kullanarak doğrudan "d3js.org" dan yükleyebilirsiniz.

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

Burada, istek API'si JSON, CSV ve TSV'yi ayrıştırmak için yerleşik desteğe sahiptir. Doğrudan isteği veya metni kullanarak ek biçimleri ayrıştırabilirsiniz.

Metin Dosyalarını Yükle

Bir metin dosyası yüklemek için aşağıdaki sözdizimini kullanın.

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text); 
});

CSV dosyalarını ayrıştırma

Bir CSV dosyasını yüklemek ve ayrıştırmak için aşağıdaki sözdizimini kullanın.

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data); 
});

Benzer şekilde, JSON ve TSV dosyalarını da yükleyebilirsiniz.

Çalışma Örneği

Bir CSV dosyasının nasıl yüklenip ayrıştırılacağına dair basit bir örnek verelim. Bundan önce, aşağıda gösterildiği gibi d3 uygulama klasörünüzde “sample.csv” adlı bir CSV dosyası oluşturmanız gerekir.

Num1,Num2
1,2
3,4
5,6
7,8
9,10

Şimdi, aşağıdaki komut dosyasını kullanarak bir web sayfası “request.html” oluşturun.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data); 
         });
      </script>
   </body>
</html>

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceksiniz,

API Yöntemlerini Talep Ediyor

Aşağıda en sık kullanılan Requests API yöntemlerinden bazıları verilmiştir.

d3.request (url [, geri arama])
request.header (ad [, değer])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (yöntem [, veri])
request.abort()
d3.csv (url [[, satır], geri arama])

Şimdi bunların her birini kısaca tartışalım.

d3.request (url [, geri arama])

Verilen URL için yeni bir istek döndürür. Bir geri arama atanmışsa, bu bir arama isteği olarak kabul edilir, aksi takdirde istek henüz çağrılmaz. Aşağıda tanımlanmıştır.

d3.request(url)
   .get(callback);

Aşağıdaki sözdizimini kullanarak bazı sorgu parametrelerini gönderebilirsiniz.

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

Bir istek başlığı veya bir mime türü belirtmek isterseniz, kurucuya bir geri arama belirtmemelisiniz.

request.header (ad [, değer])

Değeri belirtilen adla istek başlığına ayarlamak için kullanılır. Değer belirtilmezse, belirtilen adla istek başlığını kaldırır. Aşağıda tanımlanmıştır.

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

Burada, XMLHttpRequest için X-Requested-With başlığı varsayılan bir istektir.

request.mimeType ([tür])

Mime tipini verilen değere atamak için kullanılır. Aşağıda tanımlanmıştır.

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

request.user ([değer])

Kimlik doğrulama için kullanıcı adını atamak için kullanılır. Bir kullanıcı adı belirtilmezse, varsayılan olarak null olur.

request.password ([değer])

Bir değer belirtilirse, kimlik doğrulama için parolayı belirler.

request.timeout ([zaman aşımı])

Bir zaman aşımı belirtilirse, zaman aşımını belirtilen milisaniye sayısına ayarlar.

request.get ([veriler])

Bu yöntem, isteği GET yöntemi ile göndermek için kullanılır. Aşağıda tanımlanmıştır.

request.send("GET", data, callback);

request.post ([veri])

Bu yöntem, isteği POST yöntemi ile göndermek için kullanılır. Aşağıda tanımlanmıştır.

request.send("POST", data, callback);

request.send (yöntem [, veri])

Bu yöntem, isteği verilen GET veya POST yöntemini kullanarak göndermek için kullanılır.

request.abort ()

Bu yöntem, isteği iptal etmek için kullanılır.

d3.csv (url [[, satır], geri arama])

Varsayılan Mime türü text / csv ile belirtilen URL'deki CSV dosyası için yeni bir istek döndürür. Aşağıdaki sözdizimi, geri arama olmadan gösterilir.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

POST yöntemi ile bir geri arama belirtirseniz, aşağıda tanımlanır.

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

Misal

D3 uygulama kök klasör dizininizde "lang.csv" adlı bir csv dosyası oluşturun ve aşağıdaki değişiklikleri ekleyin.

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

Bir “csv.html” web sayfası oluşturun ve buna aşağıdaki komut dosyasını ekleyin.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Sınırlayıcı, düz metin veya diğer verilerdeki ayrı, bağımsız bölgeler arasındaki sınırı belirtmek için kullanılan bir veya daha fazla karakter dizisidir. Alan sınırlayıcı, virgülle ayrılmış değerler dizisidir. Sınırlayıcıyla ayrılmış değerlercomma separated values (CSV) veya tab-separated values(TSV). Bu bölümde sınırlayıcıyla ayrılmış değerler ayrıntılı olarak açıklanmaktadır.

API'yi Yapılandırma

API'yi aşağıdaki sözdizimini kullanarak kolayca yükleyebiliriz.

<script src = "https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
   var data = d3.csvParse(string);
</script>

API yöntemleri

Sınırlayıcıyla ayrılmış değerlerin çeşitli API yöntemleri aşağıda verilmiştir.

d3.csvParse (dize [, satır])
d3.csvParseRows (dize [, satır])
d3.csvFormat (satırlar [, sütunlar])
d3.csvFormatRows(rows)
d3.tsvParse (dize [, satır])
d3.tsvParseRows (string [, satır])
d3.tsvFormat (satırlar [, sütunlar])
d3.tsvFormatRows(rows)

Bu API yöntemlerinin her birini ayrıntılı olarak inceleyelim.

d3.csvParse (dize [, satır])

Bu yöntem, csv biçimini ayrıştırmak için kullanılır. Dosyayı düşünündata.csv bu aşağıda gösterilmiştir.

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Şimdi yukarıda verilen fonksiyonu uygulayabiliriz.

Example - Şu örneği ele alalım.

var data = d3.csvParse(string, function(d) {
   return {
      year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
      population: d.population
   };
});

Burada, sınırlayıcıyla ayrılmış değerlerde belirtilen dizeyi ayrıştırır. Ayrıştırılmış satırları temsil eden bir dizi nesne döndürür.

d3.csvParseRows (dize [, satır])

Bu yöntem, satırlara eşdeğer csv biçimini ayrıştırmak için kullanılır.

var data = d3.csvParseRows(string, function(d, i) {
   return {
      year: new Date(+d[0], 0, 1), // convert first colum column to Date
      population: d[1],
   };
});

Csv dosyasındaki her satırı ayrıştırır.

d3.csvFormat (satırlar [, sütunlar])

Bu yöntem, csv satırlarını ve sütunlarını biçimlendirmek için kullanılır.

Example - Şu örneği ele alalım.

var string = d3.csvFormat(data, ["year", "population"]);

Burada, sütunlar belirtilmemişse, başlık satırını oluşturan sütun adlarının listesi, satırlardaki tüm nesnelerdeki tüm özelliklerin birleşimiyle belirlenir. Sütunlar belirtilmişse, sütun adlarını temsil eden bir dizeler dizisidir.

d3.csvFormatRows (satırlar)

Bu yöntem, csv satırlarını biçimlendirmek için kullanılır.

Example - Şu örneği ele alalım.

var string = d3.csvFormatRows(data.map(function(d, i) {
   return [
      d.year.getFullYear(), // Assuming d.year is a Date object.
      d.population
   ];
}));

Burada, belirtilen dizi satırlarını sınırlayıcıyla ayrılmış değerler olarak biçimlendirerek bir dize döndürür.

d3.tsvParse (dize [, satır])

Bu yöntem, tsv biçimini ayrıştırmak için kullanılır. CsvParse'a benzer.

d3.tsvParseRows (string [, satır])

Bu yöntem, satırlara eşdeğer tsv biçimini ayrıştırmak için kullanılır. CsvParseRows işlevine benzer.

d3.tsvFormat (satırlar [, sütunlar])

Bu yöntem, tsv satırlarını ve sütunlarını biçimlendirmek için kullanılır.

d3.tsvFormatRows (satırlar)

Bu yöntem, tsv satırlarını biçimlendirmek için kullanılır.

Timer API modülü, senkronize zamanlama gecikmesi ile eşzamanlı animasyonları gerçekleştirmek için kullanılır. KullanırrequestAnimationFrameanimasyon için. Bu bölümde Timer API modülü ayrıntılı olarak açıklanmaktadır.

requestAnimationFrame

Bu yöntem, tarayıcıya bir animasyon gerçekleştirmek istediğinizi söyler ve tarayıcının bir animasyonu güncellemek için belirli bir işlevi çağırmasını ister.

Zamanlayıcıyı Yapılandırma

Aşağıdaki komut dosyasını kullanarak zamanlayıcıyı doğrudan d3js.org'dan kolayca yükleyebiliriz.

<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script>
   var timer = d3.timer(callback);
</script>

Zamanlayıcı API Yöntemleri

Timer API aşağıdaki önemli yöntemleri destekler. Bunların tamamı aşağıda ayrıntılı olarak açıklanmıştır.

d3.now ()

Bu yöntem geçerli saati döndürür.

d3.timer (geri arama [, gecikme [, süre]])

Bu yöntem, yeni bir zamanlayıcı programlamak için kullanılır ve durdurulana kadar zamanlayıcıyı çağırır. MS'de sayısal bir gecikme ayarlayabilirsiniz, ancak bu isteğe bağlıdır, aksi takdirde varsayılan olarak sıfırdır. Zaman belirtilmezse d3.now () olarak kabul edilir.

timer.restart (geri arama [, gecikme [, süre]])

Belirtilen geri arama ve isteğe bağlı gecikme ve süre ile bir zamanlayıcıyı yeniden başlatın.

timer.stop ()

Bu yöntem, zamanlayıcıyı durdurarak sonraki geri aramaları engeller.

d3.timeout (geri arama [, gecikme [, süre]])

Zamanlayıcıyı ilk geri aramada durdurmak için kullanılır. Geri arama, geçen süre olarak geçer.

d3.interval (geri arama [, gecikme [, süre]])

Belirli bir zaman gecikme aralığında çağrılır. Gecikme belirtilmezse, zamanlayıcı süresini alır.

Misal

Bir “timer.html” web sayfası oluşturun ve ona aşağıdaki komut dosyasını ekleyin.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Timer API </h3>
      <script>
         var timer = d3.timer(function(duration) {
            console.log(duration);
            if (duration > 150) timer.stop();
         }, 100);
      </script>
   </body>
</html>

Ekranda aşağıdaki yanıtı göreceğiz.

Bu bölümde animasyonlu bir çubuk grafik yapalım. Bu örnek için, popülasyon kayıtlarının önceki bölümünde kullanılan data.csv dosyasını veri kümesi olarak alıyoruz ve animasyonlu bir çubuk grafik oluşturuyoruz.

Bunu yapmak için aşağıdaki adımları uygulamamız gerekiyor -

Step 1 - Apply styles - Aşağıda verilen kodlamayı kullanarak CSS stillerini uygulayın.

<style>
   .bar {
      fill: green;
   }
   
   .highlight {
      fill: red;
   }
   
   .title {
      fill: blue;
      font-weight: bold;
   }
</style>

Step 2 - Define variables - Aşağıdaki komut dosyasını kullanarak SVG niteliklerini tanımlayalım.

<script>
   var svg = d3.select("svg"), margin = 200,
   width = svg.attr("width") - margin,
   height = svg.attr("height") - margin;
</script>

Step 3 - Append text - Şimdi, metni ekleyin ve aşağıdaki kodlamayı kullanarak dönüşümü uygulayın.

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "20px")
   .attr("class", "title")
   .text("Population bar chart")

Step 4 - Create scale range- Bu adımda, bir ölçek aralığı oluşturabilir ve grup öğelerini ekleyebiliriz. Aşağıda tanımlanmıştır.

var x = d3.scaleBand().range([0, width]).padding(0.4),
   y = d3.scaleLinear()
      .range([height, 0]);
   var g = svg.append("g")
      .attr("transform", "translate(" + 100 + "," + 100 + ")");

Step 5 - Read data - Biz zaten oluşturduk data.csvönceki örneklerimizde. Aynı dosyayı burada kullandık.

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

Şimdi, aşağıdaki kodu kullanarak yukarıdaki dosyayı okuyun.

d3.csv("data.csv", function(error, data) {
   if (error) {
      throw error;
   }

Step 6 - Set domain - Şimdi, aşağıdaki kodlamayı kullanarak alanı ayarlayın.

x.domain(data.map(function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.population; })]);

Step 7 - Add X-axis- Artık dönüşüme X eksenini ekleyebilirsiniz. Aşağıda gösterilmiştir.

g.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x)).append("text")
   .attr("y", height - 250).attr("x", width - 100)
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("year");

Step 8 - Add Y-axis - Aşağıda verilen kodu kullanarak Y eksenini dönüşüme ekleyin.

g.append("g")
   .append("text").attr("transform", "rotate(-90)")
   .attr("y", 6).attr("dy", "-5.1em")
   .attr("text-anchor", "end").attr("font-size", "18px")
   .attr("stroke", "blue").text("population");

Step 9 - Append group elements - Şimdi, grup öğelerini ekleyin ve aşağıda tanımlandığı gibi Y eksenine dönüşümü uygulayın.

g.append("g")
   .attr("transform", "translate(0, 0)")
   .call(d3.axisLeft(y))

Step 10 - Select the bar class - Şimdi, çubuk sınıfındaki tüm öğeleri aşağıda tanımlandığı gibi seçin.

g.selectAll(".bar")
   .data(data).enter()
   .append("rect")
   .attr("class", "bar")
   .on("mouseover", onMouseOver) 
   .on("mouseout", onMouseOut)
   .attr("x", function(d) { return x(d.year); })
   .attr("y", function(d) { return y(d.population); })
   .attr("width", x.bandwidth())
   .transition()
   .ease(d3.easeLinear)
   .duration(200)
   .delay(function (d, i) {
      return i * 25;
   })
   .attr("height", function(d) { return height - y(d.population); });
});

Burada, animasyonu gerçekleştirmek için mouseout ve mouseover için dinleyici olayını ekledik. Fare belirli bir çubuğun üzerine gelip oradan çıktığında animasyonu uygular. Bu işlevler aşağıdaki adımda açıklanmaktadır.

.ease(d3.easeLinear)işlevi, animasyonda görünen hareketi gerçekleştirmek için kullanılır. Yavaşlama ve yavaşlama hareketini 200 süre ile işler. Gecikme şu şekilde hesaplanabilir -

.delay(function (d, i) {
   return i * 25;
})

Step 11 - Mouseover event handler function - Aşağıda gösterildiği gibi bir fare olayını işlemek için fareyle üzerine gelme olay işleyicisi oluşturalım.

function onMouseOver(d, i) {
   d3.select(this)
      .attr('class', 'highlight');
   d3.select(this)
      .transition()
      .duration(200)
      .attr('width', x.bandwidth() + 5)
      .attr("y", function(d) { return y(d.population) - 10; })
      .attr("height", function(d) { return height - y(d.population) + 10; });
   g.append("text")
      .attr('class', 'val') 
   
   .attr('x', function() {
      return x(d.year);
   })
   
   .attr('y', function() {
      return y(d.value) - 10;
   })
}

Burada, fareyle üzerine gelme olayında, çubuk genişliğini ve yüksekliğini ve seçilen çubuğun çubuk rengini kırmızıya yükseltmek istiyoruz. Renk için, seçilen çubuğun rengini kırmızıya çeviren bir sınıf 'vurgu' ekledik.

200 milisaniye süresince çubuğa geçiş işlevi. Çubuğun genişliğini 5 piksel ve yüksekliği 10 piksel artırdığımızda, çubuğun önceki genişlik ve yüksekliğinden yeni genişlik ve yüksekliğe geçiş 200 milisaniye süresince olacaktır.

Daha sonra, çubuğun yeni yükseklik değeri nedeniyle deforme olmaması için çubuğa yeni bir 'y' değeri hesapladık.

Step 12 - Mouseout event handler function- Bir fare olayını işlemek için bir mouseout olay işleyicisi oluşturalım. Aşağıda tanımlanmıştır.

function onMouseOut(d, i) {
   d3.select(this).attr('class', 'bar');
   
   d3.select(this)
      .transition()     
      .duration(400).attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return height - y(d.population); });
   
   d3.selectAll('.val')
      .remove()
}

Burada mouseout olayında mouseover olayında uygulamış olduğumuz seçim özelliklerini kaldırmak istiyoruz. Bu nedenle, bar sınıfını orijinal 'bar' sınıfına döndürüyoruz ve seçilen çubuğun orijinal genişliğini ve yüksekliğini geri yükleyip y değerini orijinal değere geri yüklüyoruz.

d3.selectAll(‘.val’).remove() bar seçimi sırasında eklediğimiz metin değerini kaldırmak için fonksiyonu kullanılır.

Step 13 - Working Example- Programın tamamı aşağıdaki kod bloğunda verilmiştir. Bir web sayfası oluşturunanimated_bar.html ve aşağıdaki değişiklikleri ekleyin.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bar {
            fill: green;
         }
        
         .highlight {
            fill: red;
         }
         
         .title {
            fill: blue;
            font-weight: bold;
         }
      </style>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <title> Animated bar chart </title>
   </head>

   <body>
      <svg width = "500" height = "500"></svg>
      <script>
         var svg = d3.select("svg"),
         margin = 200, width = svg.attr("width") - margin,
         height = svg.attr("height") - margin;
         
         svg.append("text")
            .attr("transform", "translate(100,0)")
            .attr("x", 50).attr("y", 50)
            .attr("font-size", "20px")
            .attr("class", "title")
            .text("Population bar chart")
            
         var x = d3.scaleBand().range([0, width]).padding(0.4),
         y = d3.scaleLinear().range([height, 0]);
            
         var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

         d3.csv("data.csv", function(error, data) {
            if (error) {
               throw error;
            }
               
            x.domain(data.map(function(d) { return d.year; }));
            y.domain([0, d3.max(data, function(d) { return d.population; })]);
                     
            g.append("g")
               .attr("transform", "translate(0," + height + ")")
               .call(d3.axisBottom(x))
               .append("text")
               .attr("y", height - 250)
               .attr("x", width - 100)
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue").text("year");
               
            g.append("g")
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", "-5.1em")
               .attr("text-anchor", "end")
               .attr("font-size", "18px")
               .attr("stroke", "blue")
               .text("population");
                         
            g.append("g")
               .attr("transform", "translate(0, 0)")
               .call(d3.axisLeft(y))

            g.selectAll(".bar")
               .data(data)
               .enter()
               .append("rect")
               .attr("class", "bar")
               .on("mouseover", onMouseOver) 
               .on("mouseout", onMouseOut)   
               .attr("x", function(d) { return x(d.year); })
               .attr("y", function(d) { return y(d.population); })
               .attr("width", x.bandwidth()).transition()
               .ease(d3.easeLinear).duration(200)
               .delay(function (d, i) {
                  return i * 25;
               })
                  
            .attr("height", function(d) { return height - y(d.population); });
         });
          
          
         function onMouseOver(d, i) {
            d3.select(this)
            .attr('class', 'highlight');
               
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth() + 5)
               .attr("y", function(d) { return y(d.population) - 10; })
               .attr("height", function(d) { return height - y(d.population) + 10; });
              
            g.append("text")
               .attr('class', 'val')
               .attr('x', function() {
                  return x(d.year);
               })
               
            .attr('y', function() {
               return y(d.value) - 10;
            })
         }
          
         function onMouseOut(d, i) {
             
            d3.select(this)
               .attr('class', 'bar');
            
            d3.select(this)
               .transition()     
               .duration(200)
               .attr('width', x.bandwidth())
               .attr("y", function(d) { return y(d.population); })
               .attr("height", function(d) { return height - y(d.population); });
            
            d3.selectAll('.val')
               .remove()
         }
      </script>
   </body>
</html>

Şimdi tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.

Herhangi bir çubuk seçersek kırmızı renkle vurgulanacaktır. D3, verilerin bilgiye, belgelere, öğelere vb. Dönüştürülmesiyle ilgilenen ve nihayetinde veri görselleştirmesinin oluşturulmasına yardımcı olan genel amaçlı bir görselleştirme kitaplığıdır.