Hello guys. In this chapter, we will learn how to load data from different files and link to DOM elements.
D3, yerel olarak değişkenler halinde ve harici dosyalardan tanımlanan farklı veri tiplerini işleyebilme yapısına sahiptir.
d3.csv ()= .csv dosyasını veya veriyi yüklemek için belirtilen url'ye http isteği gönderir.
d3.json ()= .json dosyasını veya veriyi yüklemek için belirtilen url'ye http isteği gönderir.
d3.tsv ()= Bir .tsv dosyasını veya veriyi yüklemek için belirtilen url'ye http isteği gönderir.
d3.xml ()= Bir .xml dosyası veya veri yüklemek için belirtilen url'e http isteği gönderir.
##d3.csv ()
D3.csv () yöntemini kullanarak bir csv dosyası veya csv verilerini rahatlıkla yükleyebiliriz.
3.csv(url[, row, callback]);
İlk aşamada .csv dosyasının veya csv verilerini döndürecek webcoder'in url'dir. İkinci kısım da, gösterimi değiştirmemizi sağlayan bir dönüştürme fonksiyonudur. Üçüncü isteğe bağlı kısımda, .csv dosyası / verileri yüklendikten sonra yürütülecek bir geri arama işlevidir. Ayrıştırılmış veri nesnesini, geri çağırım işlevi için bir parametre olarak geçirir.
"Employee.csv" adlı bir dosyada depolanan aşağıdaki CSV verilerini nasıl yükleyeceğinizi bir inceleyelim.
Name, Age
Aysun, 30
Sude, 32
Employee.csv dosyasını projeninin kök klasörünün veri klasörüne kopyalayın ve aşağıdaki kodu etiketine yazınız.
<script>
d3.csv("/data/employees.csv", function(data) {
for (var i = 0; i < data.length; i++) {
console.log(data[i].Name);
console.log(data[i].Age);
}
});
</script>
Yukarıdaki örneğimiz de kodda da görebileceğiniz gibi, "D3 işlevi d3.csv ()", bir dosya adı girdi olarak alınır, dosyayı işler ve verileri bir dizi nesneye yükler. Unutmayalım i cvs doysayı yazdırılmaz. Bunun nedeni, ilk satırın sütun adı olarak ele alınması ve satırların geri kalanının veri olarak kabul edilmesi. D3 tarafından yüklenen veri nesnesi, bu sütun adlarını nesnenin özellikleri olarak kullanır ve bu nedenle nesne anahtarlarına dönüştürülür.
Basit bir console.log () ifadesi ile değiştirin, veri nesnesini yazdırınız.
d3.csv("/data/employees.csv", function(data) {
console.log(data);
});
d3.csv () verileri bir nesne olarak döndürüyor.
Yukarıdaki d3.csv("/data/employees.csv", function(data) { } aşağıdakine benzerdir.
d3.csv("/data/employees.csv")
.get(function(data) {
console.log(data);
});
Aşağıda gösterildiği gibi d3.csv yerine "d3.request ()" yöntemini kullanabilirsiniz.
d3.request("/data/employees.csv")
.mimeType("text/csv")
.response(function (xhr) { return d3.csvParse(xhr.responseText); })
.get(function(data) {
console.log(data);
});
Verilerin gösterimini dönüştürmek için satır parametresini kullanmanızı öneririm. Örneğin, aşağıdaki kod adları büyük harf olarak değiştirir.
d3.csv("/data/employees.csv")
.row(function(d) {
return {
age: d.age,
name: d.name.toUpperCase() // converting name to upper case
};
})
.get(function(data) {
console.log(data);
});
d3.json
JSON verileri tek bir nesne veya bir dizi JSON nesnesi olabilir.
var nameObj = {
"name": "John",
"age": 30,
"city": "New York"
};
var nameArray = [{
"name": "John",
"age": 30,
"city": "New York"
},
{
"name": "Jane",
"age": 20,
"city": "San Francisco"
}];
JSON CSV'ye benzer şekilde çalışıyor. d3.json (), girdi olarak bir JSON dosyası alır ve nesnelerin bir dizisine dönüştürebilir.
d3.json(url, callback);
İlk parametre .json dosyasının url'sidir ve ikinci parametre, bir kez çalıştırılacak bir geri arama işlevili .json dosyası yüklenir. Ayrıştırılmış veri nesnesini, geri çağırım işlevi için bir parametre olarak aktarır.
Bir örnek inceleyelim. Projemizin kök klasörünün veri klasöründe "users.json" örnek dosyası oluşturalım ve aşağıdaki JSON dosyasını yapıştıralım.
[{
"name": "John",
"age": 30,
"city": "New York"
},
{
"name": "Jane",
"age": 20,
"city": "San Francisco"
}];
Şimdi, aşağıda gösterildiği gibi d3.json () kullanarak yukarıdaki JSON dosyasını yükleyelim.
d3.json("\data\users.json", function(data) {
console.log(data);
});
d3.tsv
d3.tsv(url, callback);
D3'ün tsv () yöntemi, .tsv dosyasını bir giriş url'si olarak alır ve TSV dosyasını ayrıdıktan sonra bir veri nesnesi olarak döndürür.
Employees.tsv dosyasında saklanan TSV verileri:
Name Age
Aysun 30
Sude 32
Şimdi, yukarıdaki TSV dosyasını yükleyin ve aşağıda gösterildiği gibi d3.tsv () kullanarak verileri ayrıştırın.
d3.tsv("\data\employees.tsv", function(data) {
for (var i = 0; i < data.length; i++) {
console.log(data[i].Name);
console.log(data[i].Age);
}
});
d3.xml(url, callback);
d3.xml () yöntemi, bir xml dosyasının url'sini alır ve bir xml nesnesine döndürür.
Employees.xml dosyasındaki örnek bir XML aşağıda verilmiştir.
<?xml version="1.0" encoding="UTF-8"?>
<root>
<row>
<Name>John</Name>
<Age>30</Age>
</row>
<row>
<Name>Jane</Name>
<Age>32</Age>
</row>
</root>
d3.xml("\data\employees.xml", function(data) {
console.log(data);
});
Yukarıdaki XML'yi aşağıda gösterildiği gibi ayrabilirsiniz.
d3.xml("\data\employees.xml", function(data) {
console.log(xml.documentElement.getElementsByTagName("Name", "));
});
Bu, etiket adı "name" olan tüm etiketleri size gösterecektir.
Verilerimizi yükledikten sonra, birlikte çalışılabilecek bir veri nesnemiz var. Bu yazıda, "users.json" adlı bir dosyada saklanan JSON verileri ile çalıştıracağız.
[{
"name": "Jon",
"age": 30,
"location": "The Wall"
},
{
"name": "Arya",
"age": 12,
"location": "Braavos"
},
{
"name": "Cersei",
"age": 42,
"location": "Kings Landing"
},
{
"name": "Tyrion",
"age": 40,
"location": "Kings Landing "
}]
Bu, bir nesne nesnesi dizisi olup, her nesne bir ad, yaş ve mekan içerir. D3.json () yöntemini kullanarak yukarıdaki json verilerini yükleyerek ve onu DOM öğeleriyle bağlayalım.
d3.json("/data/users.json", function(error, data) {
d3.select("body")
.selectAll("p")
.data(data)
.enter()
.append("p")
.text(function(d) {
return d.name + ", " + d.location;
});
});
Projemizde "users.json" adlı bir dosya var. Bu dosyayı d3.json () kullanarak yükledik. D3.json () yöntemi biçimlendirilmiş bir veri nesnesini bizim için döndürdü. Ayrıca bir "error" yani hata argümanını döndürdü.
Veri nesnemizbize ait olduktan sonra, içeriği sayfamıza göndermek istediğimi de doğru vücut elemanı için gövde elemanı seçilir. D3 bu seçimi döndürür ve bunu yöntem zincirleme kullanarak bir sonraki yöntemle bağlayabiliriz.
Verilerimizi paragraflar olarak çıkarmayı öngörüyoruz. Dört tane p öğesi istiyoruz çünkü verilerimizin boyutunu bu gösteriyor. Şimdi, D3 sayfadaki p elemanlarını arayacak. Tüm p öğelerini arar ve referansları zincirdeki bir sonraki işleme gönderir.
Şimdi verilerimizi bağlamalıyız. Dolayısıyla, veri nesnemizi D3'ün data () işlevine sunuyoruz. Bu data () işlevi, veri kümesinden zincirdeki bir sonraki yönteme veri değerlerini aktarır.
Enter () işlevi, data () değerlerini alır. Bizim durumumuzda 4 değer var. Ancak, bu veri değerlerine karşılık gelen p öğelerimize zaten referansımız olmadığından, enter () yeni öğelere boş yer tutucu koyarak döndürür.
.Append ( "s")
Artık elementlerimize referansımız olduğuna göre Append () yöntemi bu öğeleri DOM'a ekler.
text () yöntemi, isim ve yer birleşimini veri nesnemizden döndüren metin yöntemine anonim bir işlev geçirdik. text () çağrılır ve karşılık gelen veri değeri ile sayfa öğelerimizin her birine bağlanır.
Harici bir kaynaktan veri yüklerken, D3 "error" yani hata adlı bir bağımsız değişken döndürür. Verilerinizin başarıyla yüklenip yüklenmediğini görmek için bu bağımsız değişkeni kullanabilirsiniz.
d3.json("\data\users.json", function(error, data) {
if (error) {
return console.warn(error);
}
d3.select("body")
.selectAll("p")
.data(data)
.enter()
.append("p")
.text(function(d) {
return d.name + ", " + d.location;
});
});
Verilerinizi yüklerken bir hata oluşursa, D3 bir hata nesnesi döndürür. Hataları kontrol edebilir ve bunları düzenleyerek bir karar verebilirsiniz.