D3.js - D3.js - Wikipedia
Geliştirici (ler) | Mike Bostock Jason Davies, Jeffrey Heer, Vadim Ogievetsky ve topluluk |
---|---|
İlk sürüm | 18 Şubat 2011 |
Kararlı sürüm | 6.3.1 / 8 Aralık 2020[1] |
Depo | |
Yazılmış | JavaScript |
Tür | Veri goruntuleme, JavaScript kitaplığı |
Lisans | BSD |
İnternet sitesi | d3js |
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
- Sözde rasgele sayıların oluşturulması normal, günlük normal, Bates, ve Irwin-Hall dağılımlar.
- 2B'deki Dönüşümler: tercüme, rotasyon, eğriltme ve ölçekleme.
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
- Bilgi işlem dışbükey örtü bir dizi nokta.
- Bilgi işlem Voronoi tesselation bir dizi nokta.
- Nokta desteği dörtlü ağaç veri yapısı.
- Poligonda temel işlemler için destek.
Renk
- İçin destek RGB, HSL, HCL, ve L * a * b * renk gösterimi.
- Renklerin parlaklığı, koyulaştırılması ve enterpolasyonu.
Referanslar
- ^ "d3 Sürümleri". Github.com.
- ^ "Protovis Kullanıcıları İçin", Mbostock.github.com, alındı 18 Ağustos 2012
- ^ 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
- ^ "Sürüm notları", D3.js, alındı 22 Ağustos 2012
- ^ 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
- ^ Bostock, Ogievetsky ve Heer 2011
- ^ Bostock, Ogievetsky ve Heer 2011, Çatlak. 3
- ^ Bostock, Mike (5 Şubat 2012), Joins ile Düşünmek
- ^ "Lopez Hugo'dan Bir Kalem". Codepen.io. Arşivlenen orijinal 22 Mart 2016. Alındı 1 Ağustos, 2016.
- ^ "Keman düzenle". JSFiddle.net. Alındı 1 Ağustos, 2016.
- ^ "Üç Küçük Çember". Mbostock.github.io. Alındı 1 Ağustos, 2016.
- ^ 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
- Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (Ekim 2011), "D3: Veriye Dayalı Belgeler", Görselleştirme ve Bilgisayar Grafiklerinde IEEE İşlemleri, IEEE Basın, 17 (12): 2301–2309, doi:10.1109 / TVCG.2011.185, PMID 22034350
- D3.js'yi kullanma - başlangıç seviyesi
- Murray, Scott (Mart 2013), Web için Etkileşimli Veri Görselleştirme, D3 ile Tasarlamaya Giriş (1. baskı), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-3973-9
- Timms, Simon (Eylül 2013), HTML5 ve JavaScript ile Sosyal Veri Görselleştirme (1. baskı), Birmingham: Packt Yayıncılık, ISBN 978-1-7821-6654-2
- D3.js'yi kullanma - orta düzey
- Dewar, Mike (Haziran 2012), Steele, Julie; Blanchette, Meghan (editörler), D3 ile Başlarken, Veriye Dayalı Belgeler Oluşturma (1. baskı), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-2879-5
- Qi Zhu, Nick (Ekim 2013), D3.js Cookbook ile Veri Görselleştirme (1. baskı), Birmingham: Packt Yayıncılık, ISBN 978-1-7821-6216-2
- Diğerleri
- Newton, Thomas; Villarreal, Oscar (2014), D3.js Eşlemeyi Öğrenmek, Birmingham: Packt Yayıncılık, s. 126, ISBN 9781783985609
- Navarro Castillo, Pablo (2014), D3.js'de Mastering Oluşturma, Birmingham: Packt Yayıncılık, s. 352, ISBN 9781783286270
- Teller, Swizec (2013), D3.js ile Veri Görselleştirme, Birmingham: Packt Yayıncılık, s. 194, ISBN 9781782160007
- Viau, Christophe (2013), Bir D3.js Edge Geliştirme: Yeniden Kullanılabilir D3 Bileşenleri ve Grafikleri Oluşturma, Bleeding Edge Press, s. 268, ISBN 9781939902023, dan arşivlendi orijinal 3 Eylül 2014, alındı 27 Ağustos 2014
- Meeks, İlyas (2014), D3.js İş Başında, Manning Yayınları, s. 325, ISBN 9781617292118
- Maclean, Malcolm (2014), D3 İpuçları ve Püf Noktaları, Leanpub, s. 580
- Kral, Ritchie (2014), D3 ile Görsel Hikaye Anlatımı: JavaScript'te Veri Görselleştirmeye Giriş, Addison-Wesley Data & Analytics Serisi, s. 288
- Videolar
- Gopal, Nikhil (Ekim 2014), D3 ve CoffeeScript: Bir Python Programcısının Web Görselleştirmelerine Giriş, Sebastopol, Kaliforniya: O’Reilly Media
- King, Ritchie (Aralık 2014), D3 Görselleştirme Canlı Dersleri: JavaScript'te Veri Görselleştirmeye Giriş, Addison-Wesley Profesyonel
İlgili Projeler
- Vega ve Vega-Lite görselleştirme gramerleri D3.js'nin parçaları üzerine inşa edilmiş bir bildirimsel görselleştirme belirtimidir.
Dış bağlantılar
- Resmi internet sitesi
- D3.js Galerisi
- Blocksplorer, kullanılan yöntemlere göre blokları arayın
- D3 "yeniden kullanılabilir grafik" kitaplıkları: