DC.js - Линейная диаграмма

Линейная диаграмма используется для отображения информации в виде серии точек данных, соединенных прямыми линиями. Точка данных представляет два значения, одно по горизонтальной оси, а другое по вертикальной оси. Например, популярность продуктов питания можно изобразить в виде линейной диаграммы таким образом, чтобы продукт был представлен по оси x, а его популярность - по оси Y. В этой главе подробно рассказывается о линейных диаграммах.

Методы линейной диаграммы

Прежде чем переходить к рисованию линейного графика, мы должны понять dc.lineChartкласс и его методы. Dc.lineChart использует миксины для получения базовых функций рисования диаграммы. Примеси, используемые dc.lineChart, следующие:

dc.stackMixin
dc.coordinateGridMixin

Полная диаграмма классов dc.lineChart выглядит следующим образом:

Dc.lineChart получает все методы указанных выше миксинов, а также имеет свои собственные методы для рисования линейной диаграммы. Они объясняются следующим образом.

dashStyle ([стиль])

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

dotRadius ([радиус])

Этот метод используется для получения или установки радиуса (в PX) для точек, отображаемых на точках данных. Это определяется следующим образом -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

интерполировать ([i])

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

renderArea ([область])

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

renderDataPoints ([параметры])

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

напряжение ([напряжение])

Этот метод используется для получения или установки натяжения нарисованных линий. Он находится в диапазоне от 0 до 1.

xyTipsOn ([xyTipsOn])

Этот метод используется для изменения поведения мыши отдельной точки данных.

Нарисуйте линейную диаграмму

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

Шаг 1. Определите переменную

Давайте определим переменную, как показано ниже -

var chart = dc.lineChart('#line');

Здесь функция dc.linechart сопоставляется с контейнером, имеющим id line.

Шаг 2. Прочтите данные

Считывать данные из 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

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

Шаг 3. Создайте возрастной параметр

Теперь создайте измерение возраста, как показано ниже -

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

Здесь мы присвоили возраст из данных Crossfilter.

~~ - это двойной НЕ побитовый оператор. Он используется как более быстрая заменаMath.floor() функция.

Теперь сгруппируйте его, используя reduceCount() функция, которая определена ниже -

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

Шаг 4. Создайте диаграмму

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

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Вот,

Ширина диаграммы 800, высота 300.
Функция d3.scale.linear используется для построения новой линейной шкалы с указанным диапазоном домена [15, 70].
Далее мы устанавливаем brushOn значение false.
Мы назначаем метку оси Y как count и метку оси X как age.
Наконец, сгруппируйте возраст, используя ageGroup.

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

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

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

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

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

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

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