Учебники

DC.js — Сетка данных

Август 31, 2018

Сетка данных используется для фильтрации и отображения записей. В этой главе подробно рассказывается о сетке данных.

Методы сетки данных

Прежде чем приступить к рисованию сетки данных, мы должны понять класс dc.dataGrid и его методы. Этот класс использует миксин, чтобы получить базовую функциональность рисования диаграммы сетки данных, которая определена ниже —

  • dc.baseMixin

Dc.dataGrid получает все методы этого миксина, а также имеет свои собственные методы для рисования сетки данных, что объясняется ниже —

beginSlice ([slice])

Этот метод используется для получения или установки индекса начального среза. Этот метод полезен при реализации нумерации страниц.

Точно так же вы можете выполнить endSlice ().

группа (функция)

Этот метод используется для выполнения групповой функции для сетки данных.

HTML ([HTML])

Этот метод используется для получения или установки функции для генерации динамического HTML.

заказ ([заказ])

Используется для сортировки функции заказа.

размер ([размер])

Используется для отображения количества элементов в сетке.

sortBy ([sortByFunction])

Этот метод используется для получения или установки функции сортировки. Мы можем отсортировать определенное поле, используя эту функцию. Например: мы можем отсортировать по возрасту, который определен ниже — 

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

Пример таблицы данных

Давайте выполним сетку данных в DC. Для этого нам нужно выполнить шаги, приведенные ниже —

Шаг 1: Добавить стили

Давайте добавим стили в CSS, используя кодировку ниже — 

.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; }

Здесь мы назначили стили для диаграммы, верхней части сетки и элемента сетки.

Шаг 2. Создайте переменную

Давайте создадим переменную в DC, как описано ниже — 

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

Здесь мы присвоили идентификатор переменной barChart в строке, id countChart — это mystats, а идентификатор gridChart — это mygrid.

Шаг 3: Считайте данные

Прочитайте данные из файла people.csv, как показано ниже — 

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

Если данных нет, то возвращается ошибка. Теперь присвойте данные перекрестному фильтру.

Здесь мы использовали тот же файл people.csv, который использовался в наших предыдущих примерах построения диаграмм. Это выглядит как показано ниже — 

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: Установите размер

Вы можете установить размерность с помощью приведенной ниже кодировки — 

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

После назначения измерения сгруппируйте возраст, используя приведенную ниже кодировку — 

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

Шаг 5: Генерация диаграммы

Теперь сгенерируйте гистограмму, используя приведенную ниже кодировку — 

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

Вот,

  • Мы присвоили ширину графика 400 и высоту 200.
  • Далее мы определили диапазон доменов как [15,70].
  • Мы установили метку оси x как возраст, а метку оси y как количество.
  • Мы указали функции эластичности Y и X как true.

Шаг 6: Создайте сеточную диаграмму

Теперь создайте сеточную диаграмму, используя приведенную ниже кодировку — 

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

Шаг 7: Рендеринг сетки

Теперь визуализируем сетку, используя приведенную ниже кодировку — 

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

Здесь мы отсортировали имя с помощью функции html () и, наконец, отрисовали диаграмму.

Шаг 8: Рабочий пример

Полный код выглядит следующим образом. Создайте веб-страницу datagrid.html и добавьте в нее следующие изменения. 

<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>

Теперь запросите браузер, и мы увидим следующий ответ.

Изначально график сетки выглядит следующим образом.

Если вы выберете определенный возраст от 63 до 66 лет, он отфильтрует следующие записи.

46
Share: