DC.js - Siatka danych

Siatka danych służy do filtrowania i wyświetlania rekordów. W tym rozdziale szczegółowo opisano siatkę danych.

Metody siatki danych

Zanim przejdziemy do rysowania siatki danych, powinniśmy zrozumieć dc.dataGridklasa i jej metody. Ta klasa używa mieszacza, aby uzyskać podstawową funkcjonalność rysowania wykresu siatki danych, która jest zdefiniowana poniżej -

dc.baseMixin

Dc.dataGrid pobiera wszystkie metody tego miksu, a także ma własne metody rysowania siatki danych, które wyjaśniono poniżej -

beginSlice ([plasterek])

Ta metoda służy do pobierania lub ustawiania indeksu początkowego wycinka. Ta metoda jest przydatna podczas implementowania stronicowania.

Podobnie możesz wykonać endSlice ().

grupa (funkcja)

Ta metoda służy do wykonywania funkcji grupowej dla siatki danych.

html ([html])

Ta metoda służy do pobierania lub ustawiania funkcji w celu wygenerowania dynamicznego kodu HTML.

zamówienie ([zamówienie])

Służy do sortowania funkcji kolejności.

rozmiar ([rozmiar])

Służy do wyświetlania liczby elementów w siatce.

sortBy ([sortByFunction])

Ta metoda służy do pobierania lub ustawiania funkcji sortowania. Dzięki tej funkcji możemy posortować poszczególne pola. Na przykład: możemy sortować według wieku, który jest zdefiniowany poniżej -

chart.sortBy(function(d) {
   return d.age;
});

Przykład siatki danych

Wykonajmy siatkę danych w DC. Aby to zrobić, musimy wykonać kroki podane poniżej -

Krok 1: Dodaj style

Dodajmy style w CSS, używając poniższego kodowania -

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

Tutaj przypisaliśmy style dla wykresu, góry siatki i elementu siatki.

Krok 2: Utwórz zmienną

Utwórzmy zmienną w DC, jak wyjaśniono poniżej -

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

Tutaj, przypisaliśmy identyfikator zmiennej barChart w linii, countChart id to mystats, a gridChart id to mygrid.

Krok 3: Przeczytaj dane

Przeczytaj dane z people.csv plik, jak pokazano poniżej -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Jeśli nie ma danych, zwraca błąd. Teraz przypisz dane do filtra krzyżowego.

Tutaj użyliśmy tego samego pliku people.csv, który był używany w naszych poprzednich przykładach wykresów. Wygląda jak pokazano poniżej -

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

..........................................
.........................................

Krok 4: Ustaw wymiar

Możesz ustawić wymiar za pomocą kodowania podanego poniżej -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Po przypisaniu wymiaru pogrupuj wiek używając kodu podanego poniżej -

var ageGroup = ageDimension.group().reduceCount();

Krok 5: Wygeneruj wykres

Teraz wygeneruj wykres słupkowy, używając kodowania podanego poniżej -

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

Tutaj,

Przypisaliśmy szerokość wykresu na 400, a wysokość na 200.
Następnie określiliśmy zakres domeny jako [15,70].
Ustawiliśmy etykietę osi X jako wiek, a etykietę osi Y jako liczbę.
Określiliśmy, że funkcje elastyczneY i X są prawdziwe.

Krok 6: Utwórz wykres siatkowy

Teraz utwórz wykres siatkowy, używając kodowania podanego poniżej -

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

Krok 7: Renderuj siatkę

Teraz wyrenderuj siatkę za pomocą kodowania podanego poniżej -

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

Tutaj posortowaliśmy nazwę za pomocą funkcji html () i ostatecznie wyrenderowaliśmy wykres.

Krok 8: Przykład roboczy

Pełny kod jest następujący. Utwórz stronę internetowądatagrid.html i dodaj do niego następujące zmiany.

<html>
   <head>
      <title>DC datagrid 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-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { 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 class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); 
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         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());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(100)
               .htmlGroup (function(d) { 
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               .html (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            gridChart.render();
         });
      </script>
   </body>
</html>

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.

Początkowo wykres siatkowy wygląda jak na poniższym zrzucie ekranu.

Jeśli wybierzesz konkretny wiek między 63 a 66 rokiem życia, odfiltruje on następujące rekordy.