DC.js - Veri Tablosu
Veri tablosu, kayıtları tablo biçiminde görüntülemek için kullanılır. Bu bölümde ayrıntılı olarak açıklandığı gibi çapraz filtre veri kümesi kayıtlarını listeler.
Veri Tablosu Yöntemleri
Bir veri tablosu çizmeye geçmeden önce, şunu anlamalıyız: dc.dataTablesınıf ve yöntemleri. Aşağıda tanımlanan bir veri tablosu çizelgesi çizmenin temel işlevini elde etmek için bir karışım kullanır -
- dc.baseMixin
Dc.dataTable, bu karışımın tüm yöntemlerini alır ve aşağıdaki gibi açıklanan veri tablosunu çizmek için kendi yöntemlerine sahiptir.
beginSlice ([dilim])
Bu yöntem, başlangıç diliminin indeksini almak veya ayarlamak için kullanılır. Bu yöntem, sayfalandırmayı uygularken kullanışlıdır.
Benzer şekilde, endSlice () işlevini de gerçekleştirebilirsiniz.
sütunlar ([sütunlar])
Bu yöntem, sütun işlevlerini almak veya ayarlamak için kullanılır. Görüntülenecek sütunları belirtmek için aşağıdaki yöntemi kullanır.
chart.columns([
function(d) { return d.mark; },
function(d) { return d.low; },
function(d) { return d.high; },
function(d) { return numberFormat(d.high - d.low); },
function(d) { return d.volume; }
]);
Burada d, veri kümesindeki bir satırı temsil eder. Veri tablosundaki sütunları görüntülemek için HTML kullanabiliriz.
grup (groupFunction)
Bu yöntem, veri tablosu için grup işlevini gerçekleştirmek için kullanılır.
sipariş ([sipariş])
Sıralama işlevini sıralamak için kullanılır. Sıra artan ise, bu durumda boyut () verileri almak için .bottom () kullanacaktır, aksi takdirde boyut (). Top () kullanacaktır.
Veri Tablosu Örneği
DC'de bir veri tablosu yapalım. Bunu yapmak için aşağıda verilen adımları izlememiz gerekiyor -
1. Adım: Stiller ekleyin
Aşağıda verilen kodlamayı kullanarak CSS'ye stiller ekleyelim -
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
Burada grafik, tablo grubu ve ızgara sütunu için stiller atadık.
2. Adım: Değişken oluşturun
Aşağıda gösterildiği gibi DC'de bir değişken oluşturalım -
var barChart = dc.barChart('#line'); //
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
Burada, satırda bir barChart değişken kimliği atadık, countChart kimliği mystats ve tableChart kimliği mytable.
3. Adım: Verileri okuyun
Aşağıda gösterildiği gibi, people.csv dosyasındaki verileri okuyun -
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}
Veriler mevcut değilse, bir hata verir. Şimdi, verileri bir çapraz filtreye atayın. Burada, önceki grafik örneklerimizde kullanılan aynı people.csv dosyasını kullandık.
Aşağıdaki gibi görünüyor -
id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay
..........................................
..........................................
4. Adım: Boyutu ayarlayın
Aşağıda verilen kodlamayı kullanarak boyutu ayarlayabilirsiniz -
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
Boyut atandıktan sonra, aşağıda verilen kodlamayı kullanarak yaşı gruplandırın -
var ageGroup = ageDimension.group().reduceCount();
5. Adım: Bir grafik oluşturun
Şimdi, aşağıda verilen kodlamayı kullanarak bir çubuk grafik oluşturun -
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
Buraya,
- Grafik genişliğini 400 ve yüksekliği 200 olarak belirledik.
- Daha sonra alan aralığını [15,70] olarak belirledik.
- X ekseni etiketini yaş ve y ekseni etiketini sayı olarak belirledik.
- ElastikY ve X fonksiyonunu true olarak belirledik.
6. Adım: Veri tablosunu oluşturun
Şimdi, aşağıda verilen kodlamayı kullanarak veri tablosunu oluşturun -
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
Burada yaş boyutunu belirledik ve verileri grupladık.
7. Adım: Tabloyu işleyin
Şimdi, ızgarayı aşağıdaki kodlamayı kullanarak oluşturun -
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
Burada, sütunları DOB kullanarak sıraladık ve kayıtları sıraladık.
Adım 8: Çalışma örneği
Kodun tamamı aşağıdaki gibidir. Bir web sayfası datatable.html oluşturun ve buna aşağıdaki değişiklikleri ekleyin.
<html>
<head>
<title>DC datatable sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
<style>
.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>
<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>
</head>
<body>
<div>
<div style = "width: 600px;">
<div id = "mystats" class = "dc-data-count" style = "float: right">
<span class = "filter-count"></span> selected out of <span
class = "total-count"></span> | <a href = "javascript:dc.filterAll();
dc.renderAll();">Reset All</a>
</div>
</div>
<div style = "clear: both; padding-top: 20px;">
<div>
<div id = "line"></div>
</div>
</div>
<div style = "clear: both">
<div id = "mytable"></div>
</div>
</div>
<script language = "javascript">
var barChart = dc.barChart('#line'); // , 'myChartGroup');
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");
d3.csv("data/people.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
// age dimension
var ageDimension = mycrossfilter.dimension(function(data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000))
});
var ageGroup = ageDimension.group().reduceCount();
barChart
.width(400)
.height(200)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.elasticY(true)
.elasticX(true)
.dimension(ageDimension)
.group(ageGroup);
countChart
.dimension(mycrossfilter)
.group(mycrossfilter.groupAll());
tableChart
.dimension(ageDimension)
.group(function (data) {
return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
})
.size(Infinity)
.columns(['name', 'DOB'])
.sortBy(function (d) {
return d.value;
})
.order(d3.ascending);
barChart.render();
countChart.render();
tableChart.render();
});
</script>
</body>
</html>
Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceksiniz.
20 ile 30 arasında bir yaş seçtikten sonra, aşağıdaki ekran görüntüsünde gösterildiği gibi tablo kayıtlarını görüntüler -