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 -