DC.js - D3.js'ye Giriş

D3.js, tarayıcıda etkileşimli görselleştirmeler oluşturmak için kullanılan bir JavaScript kitaplığıdır. D3 kitaplığı, bir web sayfasının öğelerini bir veri kümesi bağlamında değiştirmemize olanak tanır. Bu öğeler HTML, SVG veya Canvas öğeleri olabilir ve veri kümesinin içeriğine göre eklenebilir, kaldırı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 sahibi olmanızı sağlar ve veri etkileşimi eklemenizi sağlar.

D3.js, diğer kitaplıklarla karşılaştırıldığında önde gelen çerçevelerden biridir. Bunun nedeni ise; web'de ve veri görselleştirmelerinde çalışır ve kurumsal düzeydedir. Diğer bir neden de, dünya çapındaki geliştiricilerin birçok gelişmiş grafik oluşturmasına olanak tanıyan büyük esnekliğidir. Ayrıca işlevselliğini de büyük ölçüde genişletmiştir.

Aşağıdaki gibi D3.js'nin temel kavramlarını anlayalım -

Selections
Veri birleştirme
SVG
Transition
Animation
D3.js API

Bu kavramların her birini ayrıntılı olarak anlayalım.

Seçimler

Seçimler, D3.js'deki temel konseptlerden biridir. CSS Seçici konseptine dayanmaktadır. JQuery'yi kullanmış ve farkında olanlar, seçimleri zaten kolayca anlayabilirler. CSS seçicilerine göre DOM'u seçmemizi ve ardından DOM öğelerini değiştirme veya ekleme ve kaldırma seçenekleri sunmamızı sağlar.

Veri Birleştirme

Veri birleştirme D3.js'deki bir başka önemli kavramdır Seçimlerle birlikte çalışır ve HTML belgesini veri kümemize göre (bir dizi sayısal değer) 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.

SVG

SVG, Scalable Vector Graphics. SVG, XML tabanlı bir vektör grafik formatıdır. Çizgiler, Dikdörtgenler, Daireler, Elipsler, vb. Gibi farklı şekiller çizmek için seçenekler sağlar. Bu nedenle, SVG ile görselleştirmeler tasarlamak size daha fazla güç ve esneklik sağlar.

dönüşüm

SVG, tek bir SVG şekil öğesini veya SVG öğesi grubunu dönüştürmek için seçenekler sağlar. SVG dönüşümü; Çevir, Ölçek, Döndür ve Eğriltmeyi destekler.

Geçiş

Geçiş, bir öğenin bir durumundan diğerine geçiş sürecidir. D3.js, HTML sayfasında geçiş yapmak için bir geçiş () yöntemi sağlar.

Animasyon

D3.js, geçiş yoluyla animasyonu destekler. Doğru geçiş kullanımı ile animasyon yapılabilir. Geçişler, yalnızca iki anahtar kareye sahip sınırlı bir anahtar kare animasyonu biçimidir:start ve end. Başlangıç ana çerçevesi tipik olarak DOM'un mevcut durumudur ve bitiş ana çerçevesi, belirlediğiniz bir dizi nitelik, stil ve diğer özelliktir. Geçişler, başlangıç görünümüne bağlı olan karmaşık bir kod olmadan yeni bir görünüme geçiş için çok uygundur.

D3.js API

D3.js API'sinin bazı önemli yöntemlerini kısaca anlayalım.

Koleksiyonlar API'si

Bir koleksiyon, birden çok öğeyi tek bir birimde gruplayan basit bir nesnedir. Konteyner olarak da adlandırılır. Nesneleri, Haritaları, Kümeleri ve Yuvaları içerir.

Paths API

Yollar, dikdörtgenler, daireler, elipsler, çoklu çizgiler, çokgenler, düz çizgiler ve eğriler çizmek için kullanılır. SVG Yolları, konturlanabilen, doldurulabilen, kırpma yolu olarak kullanılabilen veya üçünün herhangi bir kombinasyonu olarak kullanılabilen bir şeklin anahatlarını temsil eder.

Axis API

D3.js, eksen çizmek için işlevler sağlar. Bir eksen çizgiler, işaretler ve etiketlerden oluşur. Bir eksen ölçek kullanır, bu nedenle her eksene çalışmak için bir ölçek verilmesi gerekecektir.

Yakınlaştırma API'si

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.

Sınırlayıcıyla Ayrılmış Değerler API'si

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. Kısaca, ayırıcıyla ayrılmış değerler Virgülle Ayrılmış Değerler (CSV) veya Sekmeyle Ayrılmış Değerlerdir (TSV).