D3.js - D3.js - Wikipedia

D3.js
Logo D3.svg
Geliştirici (ler)Mike Bostock Jason Davies, Jeffrey Heer, Vadim Ogievetsky ve topluluk
İlk sürüm18 Şubat 2011; 9 yıl önce (2011-02-18)
Kararlı sürüm
6.3.1 / 8 Aralık 2020; 7 gün önce (2020-12-08)[1]
Depo
Bunu Vikiveri'de düzenleyin
YazılmışJavaScript
TürVeri goruntuleme, JavaScript kitaplığı
LisansBSD
İnternet sitesid3js.org

D3.js (Ayrıca şöyle bilinir D3kısaltması Veriye Dayalı Belgeler) bir JavaScript dinamik, etkileşimli üretmek için kitaplık veri görselleştirmeleri içinde internet tarayıcıları. Kullanır ölçeklendirilebilir Vektör Grafiği (SVG), HTML5, ve Basamaklı Stil Şablonu (CSS) standartları. Daha önceki Protovis çerçevesinin halefidir.[2] Gelişimi 2011 yılında kaydedildi,[3] 2.0.0 sürümü Ağustos 2011'de piyasaya sürüldüğünden.[4]

Bağlam

Veri görselleştirmesini web tarayıcılarına getirmek için daha önce çeşitli girişimlerde bulunulmuştur. En dikkate değer örnekler, tümü D3.js'nin doğrudan öncülleri olarak kabul edilebilecek Prefuse, Flare ve Protovis araç takımlarıydı.

Prefuse 2005 yılında oluşturulmuş bir görselleştirme araç setiydi. Java ve görselleştirmeler bir Java eklentisiyle tarayıcılarda oluşturuldu. Flare, 2007'de kullanılan benzer bir araçtı ActionScript ve oluşturma için bir Flash eklentisi gerektirdi.

Prefuse and Flare'yi geliştirme ve kullanma deneyimine dayanan 2009 yılında Jeff Heer, Mike Bostock ve Vadim Ogievetsky of Stanford Üniversitesi Stanford Görselleştirme Grubu, verilerden SVG grafikleri oluşturmak için bir JavaScript kitaplığı olan Protovis'i yarattı. Kütüphane, veri görselleştirme uygulayıcıları ve akademisyenler tarafından biliniyordu.[5]

2011'de, Protovis'in geliştirilmesi yeni bir proje olan D3.js'ye odaklanmak için durduruldu. Protovis'in deneyimlerinden haberdar olan Bostock, Heer ve Ogievetsky ile birlikte, aynı zamanda web standartlarına odaklanan ve iyileştirilmiş performans sağlayan daha etkileyici bir çerçeve sağlamak için D3.js'yi geliştirdi.[6]

Teknik prensipler

D3.js kitaplığı, öğeleri seçmek, SVG nesneleri oluşturmak, bunları biçimlendirmek veya geçişler, dinamik efektler veya araç ipuçları onlara. Bu nesneler ayrıca CSS kullanılarak da şekillendirilebilir. Metin / grafik grafikleri ve diyagramları oluşturmak için D3.js işlevleri kullanılarak büyük veri kümeleri SVG nesnelerine bağlanabilir. Veriler, aşağıdaki gibi çeşitli formatlarda olabilir: JSON, virgülle ayrılmış değerler (CSV) veya geoJSON, ancak gerekirse JavaScript işlevleri diğer veri biçimlerini okumak için yazılabilir.

Seçimler

D3.js tasarımının temel ilkesi, programcının belirli bir dizi seçmek için önce CSS stili bir seçici kullanmasını sağlamaktır. Belge Nesnesi Modeli (DOM) düğümleri, daha sonra operatörleri kullanarak bunları aynı şekilde jQuery.[7] Örneğin, biri tüm HTML'yi seçebilir <p>...</p> öğeleri ve ardından metin renklerini değiştirin, ör. lavantaya:

 d3.hepsini seç("p")                 // tüm 
 elemanlarını seç   .stil("renk", "lavanta")     // "renk" stilini "lavanta" değerine ayarlayın   .attr("sınıf", "kareler")       // "sınıf" özniteliğini "kareler" değerine ayarlayın   .attr("x", 50);                 // "x" özelliğini (yatay konum) 50 piksel değerine ayarlayın

Seçim, hiyerarşideki bir HTML etiketine, sınıfa, tanımlayıcıya, niteliğe veya yere dayalı olabilir. Öğeler seçildikten sonra, bunlara işlemler uygulanabilir. Bu, nitelikleri, ekran metinlerini ve stilleri almayı ve ayarlamayı içerir (yukarıdaki örnekte olduğu gibi). Öğeler de eklenebilir ve kaldırılabilir. Bu HTML öğelerini değiştirme, oluşturma ve kaldırma işlemi, D3.js'nin temel konsepti olan verilere bağımlı hale getirilebilir.

Geçişler

Bir geçiş bildirilerek, nitelikler ve stiller için değerler belirli bir süre boyunca sorunsuz şekilde enterpolasyonlu hale getirilebilir. Aşağıdaki kod tüm HTML'yi oluşturacak <p>...</p> bir sayfadaki öğeler metin rengini yavaş yavaş pembe olarak değiştirir:

 d3.hepsini seç("p")             // tüm 
 elemanlarını seç   .geçiş("trans_1")      // "trans_1" adıyla geçiş     .gecikme(0)                 // tetiklemeden 0ms sonra başlayan geçiş     .süresi(500)            // 500 ms için geçiş     .kolaylaştırmak(d3.easyLinear)           // geçiş yumuşatma ilerlemesi doğrusaldır ...   .stil("renk", "pembe");    // ... renk: pembe

Bağlanma verileri

Daha gelişmiş kullanımlar için, yüklenen veriler, öğelerin oluşturulmasını sağlar. D3.js belirli bir veri kümesini yükler ve ardından, öğelerinin her biri için ilişkili özelliklere (şekil, renkler, değerler) ve davranışlara (geçişler, olaylar) sahip bir SVG nesnesi oluşturur.[8][9][10]

// Veriler  var countryData = [     { isim:"İrlanda",  Gelir:53000, hayat: 78, pop:6378, renk: "siyah"},     { isim:"Norveç",   Gelir:73000, hayat: 87, pop:5084, renk: "mavi" },     { isim:"Tanzanya", Gelir:27000, hayat: 50, pop:3407, renk: "gri" }  ];// SVG kapsayıcısı oluştur  var svg = d3.seç("#hook").eklemek("svg")        .attr("Genişlik", 120)        .attr("yükseklik", 120)        .stil("arka plan rengi", "# D0D0D0");// Verilerden SVG öğeleri oluşturun     svg.hepsini seç("daire")                  // sanal daire şablonu oluştur      .veri(countryData)                   // veriyi bağla       .katılmak("daire")                                 // verileri seçime birleştirir ve her bir veri için daire öğeleri oluşturur        .attr("İD", işlevi(d) { dönüş d.isim })            // çevre kimliğini ülke adına göre ayarlayın        .attr("cx", işlevi(d) { dönüş d.Gelir / 1000  })  // gelire göre dairenin yatay konumunu ayarlayın         .attr("cy", işlevi(d) { dönüş d.hayat })            // yaşam beklentisine göre dairenin dikey konumunu ayarlayın         .attr("r",  işlevi(d) { dönüş d.pop / 1000 *2 })   // çemberin yarıçapını ülkenin nüfusuna göre ayarlayın         .attr("doldur", işlevi(d) { dönüş d.renk });        // çemberin rengini ülkenin rengine göre ayarlayın

Oluşturulan SVG grafikleri sağlanan verilere göre tasarlanır.

Veri kullanarak düğüm ekleme

Bir veri kümesi bir belgeye bağlandığında, D3.js kullanımı tipik olarak, .giriş() işlev, örtük bir "güncelleme" ve açık bir .çıkış() işlev, bağlı veri kümesindeki her öğe için çağrılır. Hiç zincirleme yöntemler sonra .giriş() komut, seçimdeki bir DOM düğümü tarafından zaten temsil edilmeyen veri kümesindeki her öğe için çağrılacaktır (önceki hepsini seç()). Benzer şekilde, veri kümesinde karşılık gelen bir öğenin bulunduğu tüm mevcut seçili düğümlerde örtük güncelleme işlevi çağrılır ve .çıkış() onlara bağlanmak için veri kümesinde bir öğe bulunmayan tüm mevcut seçili düğümlerde çağrılır. D3.js belgeleri, bunun nasıl çalıştığına dair birkaç örnek sağlar.[11]

API yapısı

D3.js API birkaç yüz işlev içerir ve aşağıdaki mantıksal birimler halinde gruplandırılabilirler:[12]

  • Seçimler
  • Geçişler
  • Diziler
  • Matematik
  • Renk
  • Ölçekler
  • SVG
  • Zaman
  • Düzenler
  • Coğrafya
  • Geometri
  • Davranışlar

Matematik

Diziler

D3.js dizi işlemleri, JavaScript'teki mevcut dizi desteğini tamamlamak için oluşturulmuştur (mutator yöntemleri: sort, reverse, splice, shift ve unshift; erişimci yöntemleri: concat, join, slice, indexOf ve lastIndexOf; yineleme yöntemleri: filter, every, forEach, harita, biraz, azalt ve azalt Sağa). D3.js bu işlevselliği aşağıdakilerle genişletir:

  • Bir dizinin minimum, maksimum, kapsam, toplam, ortalama, medyan ve nicelik bulma fonksiyonları.
  • Dizileri sıralama, karıştırma, permütasyon, birleştirme ve ikiye bölme işlevleri.
  • İç içe diziler için işlevler.
  • İlişkili dizileri işlemek için işlevler.
  • Harita ve set koleksiyonları için destek.

Geometri

Renk

  • İçin destek RGB, HSL, HCL, ve L * a * b * renk gösterimi.
  • Renklerin parlaklığı, koyulaştırılması ve enterpolasyonu.

Referanslar

  1. ^ "d3 Sürümleri". Github.com.
  2. ^ "Protovis Kullanıcıları İçin", Mbostock.github.com, alındı 18 Ağustos 2012
  3. ^ Myatt, Glenn J .; Johnson, Wayne P. (Eylül 2011), "5.10 Daha fazla okuma", Verileri Anlamlandırma III: Etkileşimli Veri Görselleştirmeleri Tasarlamak İçin Pratik Bir Kılavuz, Hoboken, New Jersey: John Wiley & Sons, s. A – 2, ISBN  978-0-470-53649-0, alındı 23 Ocak 2013
  4. ^ "Sürüm notları", D3.js, alındı 22 Ağustos 2012
  5. ^ Akademik örnek: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), "ReVision: Grafik Görüntülerinin Otomatik Sınıflandırılması, Analizi ve Yeniden Tasarımı", ACM Kullanıcı Arayüzü Yazılım ve Teknolojisi, alındı 23 Ocak 2013
  6. ^ Bostock, Ogievetsky ve Heer 2011
  7. ^ Bostock, Ogievetsky ve Heer 2011, Çatlak. 3
  8. ^ Bostock, Mike (5 Şubat 2012), Joins ile Düşünmek
  9. ^ "Lopez Hugo'dan Bir Kalem". Codepen.io. Arşivlenen orijinal 22 Mart 2016. Alındı 1 Ağustos, 2016.
  10. ^ "Keman düzenle". JSFiddle.net. Alındı 1 Ağustos, 2016.
  11. ^ "Üç Küçük Çember". Mbostock.github.io. Alındı 1 Ağustos, 2016.
  12. ^ d3 (30 Haziran 2016). "API Referansı · d3 / d3 Wiki · GitHub". Github.com. Alındı 1 Ağustos, 2016.

daha fazla okuma

D3.js ile ilgili arka plan
D3.js'yi kullanma - başlangıç ​​seviyesi
D3.js'yi kullanma - orta düzey
Diğerleri
Videolar

İlgili Projeler

Dış bağlantılar