d3 js api functions tutorial with examples
Bu eğitici, veri bağlama, birleştirme, verileri yükleme ve ayrıştırma, enterpolasyon gibi özellikler eklemek için çeşitli D3.js API işlevlerini açıklar:
D3.js, CSV, XML ve JSON formatında veri bağlama, birleştirme, harici verileri yükleme ve ayrıştırma gibi heyecan verici özellikler ekleyen, rastgele sayıları, enterpolasyonu ve metni işleyen çeşitli API işlevlerinden oluşan açık kaynaklı bir JavaScript veri görselleştirme kitaplığıdır. verilerin görselleştirilmesi için animasyon, geçiş ve grafik oluşturma gibi çeşitli işlevlerle birlikte biçimlendirme ve uluslararasılaştırma.
kıdemli geliştiriciler için j2ee röportaj soruları ve cevapları
Bununla ilgili önceki öğreticilerimize başvurabilirsiniz. d3 serisi özellikleri, avantajları ve ön koşulları hakkında daha fazla bilgi edinin.
Ne öğreneceksin:
D3.js ile Veri Bağlama
Grafikler ve grafikler gibi veri görselleştirmeleri oluşturmak için, verileri bir DOM öğesi ile bağlamak veya birleştirmek gerekir.
Veriler, aşağıda gösterildiği gibi aynı türden sayısal değerleri içeren bir kap olan bir dizi olabilir.
var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)
İlk adım, harici verilerin veri görselleştirmesini oluşturmak için bir düzlem veya çerçeveye sahip olmak için bir SVG nesnesi oluşturmaktır, HTML öğesi d3.select () ile seçilir ve nitelikler ekleyerek bir tuval gibi davranan SVG'yi ekler. tuval için genişlik ve yükseklik gibi.
var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)
Bir sonraki adım, diğer SVG öğelerini içeren bir grup gibi davranan 'g' SVG öğesinin eklenmesidir.
svg.selectAll ('g')
Ayrıca, .data (veri) işlevini kullanarak verileri tuvale eklenen bu SVG şekline bağlayın veya birleştirin.
svg.selectAll ('g').data(data)
Sonraki adım, .enter () yöntemini kullanarak verileri DOM öğelerine .data (veri) işlevine bağlamaktır.
svg.selectAll ('g').data(data).enter()
Ayrıca, şekli tuvale ekleyebilmemiz için SVG şekli ekleyin.
svg.selectAll ('g') . data(data).enter().append('g')
Veri bağlamanın bir örneği aşağıda verilmiştir.
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em');

Bizim durumumuzda kıta bilge bir nüfus yoğunluğu olan verileri bağlamak için
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)
Değişken ekran, bizim durumumuzda gövde olan html öğesine SVG şekli eklenerek bir çizim alanına atanır.
Değişken ölçek aralığı, ölçek üzerindeki değerleri grafik biçiminde görüntülemek üzere bir grafiği çizmek için etki alanı ve aralık parametreleriyle scaleLinear () işlevini alır.
.data (infoset) .enter (), değişken bir Infoset'e atanan veri setimizin bağlanmasına yardımcı olacaktır.
Veri kümesindeki değerlerine karşılık gelen farklı uzunluklardaki dikdörtgenlere karşı değerleri çizmek için metin eklenir.
D3.js'de Verileri Birleştirme, Yükleme ve Ayrıştırma
D3.js harici verileri veya yerel olarak farklı dosya türlerinden değişkenler yükleyebilir ve bu verileri DOM öğelerine bağlayabilir.
Farklı veri biçimleri CSV, JSON, TSV ve XML'dir; d3.csv (), d3.JSON (), d3.tsv () ve d3.xml (), veri dosyalarını farklı biçimlerde yüklemek için sağlanan ilgili yöntemlerdir. İlgili formatlardaki dosyaları veya verileri yüklemek için belirtilen url'ye bir http isteği göndererek harici kaynaklardan gelen formatlar ve ayrıca ayrıştırılmış ilgili veri nesneleri ile geri arama işlevini yürütür.

CSV veri dosyasını yüklemek için sözdizimi aşağıda verilmiştir.
d3.csv (url (, row, callback));
# 1) Yukarıdaki ilk parametre url'si, d3.csv işlevi tarafından yüklenecek harici bir dosya olan csv dosyasının URL'si veya sunucu yoludur. bizim durumumuzda
http: // localhost: 8080 / örnekler / movie_published.csv
#iki) İkinci parametre isteğe bağlıdır
# 3) Üçüncü parametre, başka bir işlev tarafından bağımsız değişken olarak iletilebilen ve dosyanın JSON, TSV ve XML biçimleri için başka bir kodun yürütülmesini bitirene kadar belirli kodun yürütülmesini sağlayan bir işlev olan Geri Çağırma işlevidir, işlev d3.csv'dir. sırasıyla d3.json, d3.tsv ve d3.xml ile değiştirilir.
Dış verileri çözümlemek için bir örnek aşağıda verilmiştir.
d3.csv('movie_published.csv', function(data) { console.log(data); });

Google Chrome tarayıcısında açılırsa, F12'ye tıklayın ve sayfa yenileme, bizim durumumuzda konsol günlüğünü gösterecek olan konsol.log (veri), veri kümesinden değerleri sütun başlıkları, movie_name ve year ile gösterecektir. sunucu konumunda tutulan CSV dosyasından görüntülenecektir.
D3.js'de Rastgele Sayıları İşleme
d3 - rastgele API yöntemleri, olası farklı sonuçların gerçekleşme olasılıklarını hesaplayan matematiksel bir işlev olan çeşitli olasılık dağılımlarından rastgele sayılar döndürür.
Bu işlevler öncelikle Math. JavaScript'in, belirtilen aralığın minimum ve maksimum sayısı arasında kalan sayılar üreten rastgele işlevi, Math her seferinde benzersiz bir sayı ile sonuçlanır. rastgele işlev yürütülür.
- d3.randomUniform - Düzgün bir dağılımdan rastgele sayılar oluşturun. Örneğin. d3.randomUniform (1, 2) () - 1 dahil ve 2'den küçük rastgele sayılar döndürür.
- d3.randomNormal - Normal bir dağılımdan rastgele sayılar üretin, Örneğin. d3.randomNormal (1, 2) () - belirtilen minimum değer ile maksimum değerler arasında bir tam sayı döndürür.
- d3.randomLogNormal - Log-normal dağılımdan rastgele sayılar oluşturun ve beklenen değer, rastgele değişken için doğal logaritma değeri olacaktır.
- d3.randomBates - Bir Bates dağılımından bağımsız değişkenlerle rastgele sayılar oluşturun.
- d3.randomIrwinHall - Irwin – Hall dağılımından rastgele sayılar oluşturun.
- d3.randomExponential - Üstel bir dağılımdan rastgele sayılar oluşturun.
D3'teki Rastgele işlevlere örnek
Random Functions in d3 Random Functions in d3
document.write(d3.randomUniform(1, 2)() +''); document.write(d3.randomNormal(1, 2)()+'
'); document.write(d3.randomLogNormal(1, 2)()+'
'); document.write(d3.randomBates(1, 2)()+'
'); document.write(d3.randomIrwinHall(1, 2)()+'
'); document.write(d3.randomExponential(1, 2)()+'
');

D3.js'de Enterpolasyon
İki rastgele değer arasında enterpolasyon yapmak için uygulanan API yöntemleri, bitiş değerinin türüne bağlıdır b, Genel sözdizimi d3.interpolate (a, b). Aşağıda, son değer b'nin veri türlerini ve veri türüne göre değişecek karşılık gelen yöntem veya işlevi listeleyen bir tablodur.
Son değerin türü b | Kullanılan yöntem adı |
---|---|
B genel bir diziyse | interpolateArray () |
B Boole, null veya undefined ise | Sabit b kullanılacak |
B bir sayı ise | interpolateNumber () |
B, renge başvuran bir renk veya dizeyse | interpolateRgb () |
B bir tarih ise | interpolateDate () |
B bir dizeyse | interpolateString () |
B, yazılan bir sayı dizisi ise | interpolateNumberArray () |
Eğer b sayıya atıfta bulunuyorsa | interpolateNumber () |
Aksi takdirde | interpolateObject () |
Aşağıdaki örnek açıklıyor:
- d3.interpolateNumber () fonksiyonu, başlangıç değeri olarak 10 ve bitiş değeri 20 olarak, görüntülenen değerler, enterpolasyon parametreleri için başlangıç değeri 10'dan bitiş değeri 20'ye (0.0) - (0.5) - (1.0) arasında değişir.
- Sonuç olarak karşılık gelen rgb (‘r’, ’g’, ’b’) değerleriyle sonuçlanan iki farklı renk adı için d3.interpolateRgb () işlevi, (0.0) ila (0.5) ila (1.0) arasındaki paramların enterpolasyonu için
- 'yyyy-aa-gg ss: dd: ss' biçimindeki iki farklı tarih için d3.interpolateDate () işlevi, (0.0) ile (1.0) arasındaki enterpolate parametreleri için yukarıdaki tarih aralığı arasındaki tarihleri görüntüler.
Aralık arasındaki sayılar, renkler ve tarihler için bir enterpolasyon örneği aşağıda verilmiştir.
Interpolate Numbers, Colors and Dates
var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + ''); document.write(inpolat(0.2)+ '
'); document.write(inpolat(0.5) + '
'); document.write(inpolat(1.0)+ '
'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '
'); document.write(inpolcolrs(0.2)+ '
'); document.write(inpolcolrs(0.5)+ '
'); document.write(inpolcolrs(0.8)+ '
'); document.write(inpolcolrs(1.0)+ '
'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '
'); document.write(inpoldates(0.2)+ '
'); document.write(inpoldates(0.5)+ '
'); document.write(inpoldates(0.8)+ '
'); document.write(inpoldates(1.0)+ '
');

D3.js ile Metin Biçimlendirme ve Uluslararasılaştırma
Metin biçimlendirme ve Yerelleştirme, aşağıda örneklerle açıklandığı gibi Sayı biçimi, Tarih biçimi ve yerel ayar işlevleriyle D3.js'de gerçekleştirilebilir.
D3 - yerel ()
d3.locale (tanım), tanıma özgü yerel ayarı döndürür, varsayılan olarak yerel tanım, d3.locale (tanım) için ABD İngilizcesidir,
Java'da bir dizge dizisi döndürmek
Yerel tanım için sayı formatlama özellikleri aşağıda listelenmiştir.
- ondalık: Ondalık nokta genellikle 25,75 gibi para birimlerinde uygulanır ( Örneğin. '.').
- binlerce: Bin, 2.475 gibi bin değerden sonra virgül olarak kullanılan bir tanımlayıcı veya ayırıcıdır ( Örneğin. ',').
- gruplama: Her grup için Dizi Grubu ve boyut Arrayname (5) kullanılarak kontrol edilebilir, burada 5 bir indeks ve dizi boyutu 6 üyedir.
- para birimi: Para birimi dizeleri için önek ve son ek ( Örneğin. ('$', '')).
- dateTime: Tarih ve saat (% c) biçiminde tarih ve saat ( Örneğin. '% A% b% e% X% Y').
- tarih: Tarih (% x) ( Örneğin. Ay Gün ve Yıl olarak “% m /% d /% Y”) biçim dizesi.
- zaman: Zaman (% X) ( Örneğin. Saat Dakika ve Saniye cinsinden “% H:% M:% S”) biçim dizesi.
- dönemler: Yerel ayarın A.M. ve P.M. eşdeğerler ( Örneğin. ('ÖÖ', 'ÖS')).
- günler: Harflerle Pazar gününden başlayarak haftanın günleri.
- shortDays: Pazar ile başlayan Kısa Günler veya hafta içi günlerin SUN, MON, vb. Gibi kısaltılmış isimleri.
- aylar: Ayın Ekim gibi tam adları (Ocak'tan itibaren).
- shortMonths: Kısa Aylar veya ayların JAN, FEB, MAR vb. Kısaltılmış isimleri (Ocak ayından itibaren).
Yukarıda açıklanan tüm parametreler, aşağıdaki görüntüde ilgili değerleri ile değişkenler olarak görüntülenir.

D3.format
JavaScript kitaplığındaki d3.format, girdi bağımsız değişkeni olarak bir sayı alır, sözdizimi d3.format (belirtici), sayıları dönüştürmek için d3.format kullanılır.
D3'e göre format uygulama örneği aşağıda verilmiştir.
Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });

D3.js ile Tarih Biçimleriyle Değiştirme
D3.js kitaplığını kullanan zaman biçimlendirmesi; burada d3.timeParse, joker karakterlerle, yani giriş zamanı biçimini istenen biçime dönüştürmeye yardımcı olan normal ifade ile uygulanabilir.
Saat ve Tarih ile ilgili bir format örneği aşağıda verilmiştir.
body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +''); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'
'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'
'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'
'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'
'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'
');

Sonuç
Bu eğiticide, verilerin bir dizi biçimindeki veri bağlama gibi geri kalan tüm temel yöntemlerini ele aldık ve verilerin CSV, JSON ve XML biçiminde birleştirilmesi, yüklenmesi ve ayrıştırılması.
Ayrıca, çizelge veya grafiklerde veri gruplarını görselleştirmek için rastgele sayılar ve enterpolasyon yöntemini kullanarak manipülasyonu ve Numbers, tarih, saat ve farklı yerel para birimleri için d3.locale yöntemlerini kullanarak metni ve yerelleştirmeyi biçimlendirmeyi tartıştık.
Önerilen Kaynaklar
- JavaScript Enjeksiyon Eğitimi: Web Sitesinde JS Enjeksiyon Saldırılarını Test Edin ve Önleyin
- Ayrıntılı Yanıtlarla EN İYİ 45 JavaScript Mülakat Soruları
- 2021'deki En İyi 10 API Test Aracı (SOAP ve REST API Test Araçları)
- API Test Eğitimi: Yeni Başlayanlar İçin Tam Bir Kılavuz
- Rest API Yanıt Kodları ve Dinlenme Talep Türleri
- BDD Yaklaşımı Kullanılarak Salatalık ile REST API Testi
- Rest API Eğiticisi: REST API Mimarisi ve Kısıtlamaları
- Özellik Karşılaştırmalı En İyi 10 API Yönetim Aracı
- En Önemli 20 API Testi Görüşme Soruları ve Cevapları