Научитесь создавать линейную диаграмму с помощью D3.js

1656627015 nauchites sozdavat linejnuyu diagrammu s pomoshhyu d3js

автор Сохаиб Нехал

Используйте D3.js, чтобы нарисовать красивые изображения ваших данных.

EUZuijdvOc8orJ9PUi3raR9Lm0LktF18luAT
Изучите D3.js бесплатно на Scrimba

D3.js – это библиотека JavaScript с открытым исходным кодом, которая используется для создания красивых представлений данных, которые можно просматривать в любом современном браузере. Используя D3.js, мы можем создавать разные диаграммы и графики из наших данных.

В этом учебнике мы собираемся создать линейную диаграмму, отображающую индекс цен на биткойн за последние шесть месяцев. Мы будем извлекать данные из внешнего API и воспроизводить линейную диаграмму с метками и осью внутри DOM.

Мы также создали бесплатный курс D3.js по Scrimba. Проверьте это здесь.

Начинаем

Прежде всего, мы импортируем библиотеку D3.js непосредственно из CDN внутри нашего HTML.

<html>  <head>    <link rel="stylesheet" href="  </head>  <body>    <svg></svg>    <script src="  </body></html>

Мы также добавили <svg> внутри нашего HTML, чтобы создать линейную диаграмму внутри него с помощью D3.js

Теперь перейдем к написанию нашего кода JavaScript. Прежде всего, мы хотим загрузить наши данные индекса цен на биткойн из внешнего API после загрузки DOM.

Получить данные

var api = 'https://api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) {   fetch(api)     .then(function(response) { return response.json(); })     .then(function(data) {          //DO SOMETHING WITH DATA       })});

В приведенном выше коде мы используем fetch способ получения данных с внешнего API. Затем мы анализируем его с помощью .json() метод.

Теперь мы хотим превратить эти данные в пары ключ/значения, чтобы они были в формате date:price. Для этого мы собираемся отправить наши данные другой функции, которая разберет и вернет их в желаемом виде.

Разбор данных

.....then(function(data) {          var parsedData = parseData(data) })
function parseData(data) {   var arr = [];   for (var i in data.bpi) {      arr.push(         {            date: new Date(i), //date            value: +data.bpi[i] //convert string to number         });   }   return arr;}

Мы передаем наши данные функции parseData возвращает другой массив объектов. Каждый объект содержит дату и цену биткойна на эту конкретную дату.

Когда мы получим данные в нужном формате, мы отправим эти данные в drawChart функция, в которой весь оставшийся код будет написан с помощью D3.js для воспроизведения линейной диаграммы.

.....then(function(data) {    var parsedData = parseData(data);   drawChart(parsedData);})

Выберите элемент SVG

В drawChart функцией мы прежде всего выбираем наш элемент SVG и придаем ему определенный стиль.

function drawChart(data) {
   var svgWidth = 600, svgHeight = 400;   var margin = { top: 20, right: 20, bottom: 30, left: 50 };   var width = svgWidth - margin.left - margin.right;   var height = svgHeight - margin.top - margin.bottom;
   var svg = d3.select('svg')     .attr("width", svgWidth)     .attr("height", svgHeight);...

В приведенном выше коде мы устанавливаем ширину и высоту контейнера SVG, сначала выбрав его с помощью select() метода, а затем с помощью attr() метод назначения атрибутов.

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

Используя CSS, мы предоставили пределы нашему контейнеру SVG:

<style>    .line-chart    {        border: 1px solid lightgray;    }</style>

Пока мы не имеем ничего внутри нашего DOM:

amoiuppE703baUzbP-qvjHoeM8I0S4HgucSw

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

Создание и трансформация группового элемента

...var g = svg.append("g")   .attr("transform",       "translate(" + margin.left + "," + margin.top + ")"   );

Группировка элементов помогает организовать схожие или родственные элементы вместе. Здесь, после визуализации элемента группы, мы придаем ему некоторую трансформацию.

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

Добавить весы

Теперь мы хотим добавить масштабы в нашу диаграмму.

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

Как мы знаем, наши данные состоят из дат и стоимости биткойнов на эти даты. Следовательно, мы можем предположить, что ось x будет содержать даты, а ось y – значение. Вот как мы можем увидеть изменения в линейной диаграмме относительно времени.

Итак, во фрагменте кода выше мы создали шкалу времени типа оси x и линейного типа оси y. Мы также предоставляем эти шкалы диапазонов в соответствии с шириной и высотой нашего контейнера SVG.

Создайте линию

Теперь перейдем к определению нашей линии с помощью d3.line метод. Мы будем определять атрибуты x и y строки, передавая анонимные функции и возвращая объект даты и биткойна значение для этого конкретного дня.

var line = d3.line()   .x(function(d) { return x(d.date)})   .y(function(d) { return y(d.value)})   x.domain(d3.extent(data, function(d) { return d.date }));   y.domain(d3.extent(data, function(d) { return d.value }));

Добавить оси

Теперь мы собираемся добавить наши левую и нижнюю оси внутри нашего группового элемента для линейной диаграммы. Левая ось будет представлять стоимость биткойна, а нижняя ось отображает соответствующую дату.

g.append("g")   .attr("transform", "translate(0," + height + ")")   .call(d3.axisBottom(x))   .select(".domain")   .remove();

В вышеприведенном коде мы добавляем групповой элемент внутрь нашей основной группы и перекладываем его в самом низу нашего контейнера. Затем мы проходим d3.axisBottom метод в функции вызова где d3.axisBottom принимает параметр x которая определена в Добавить весы См. раздел.

g.append("g")   .call(d3.axisLeft(y))   .append("text")   .attr("fill", "#000")   .attr("transform", "rotate(-90)")   .attr("y", 6)   .attr("dy", "0.71em")   .attr("text-anchor", "end")   .text("Price ($)");

Подобно нижней оси, мы добавляем еще один групповой элемент, а затем вызываем его d3.axisLeft метод, принимающий параметр y. Затем мы также стилизуем нашу ось, назначая ей разные атрибуты и метку.

Если мы сохраним и обновим страницу, мы увидим, что наши оси отображаются внутри DOM:

Os96ExJTGVVQuHqS-q3zqToG-pfBg5CztO6H
Левая и нижняя оси

Добавить путь

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

Мы передаем наш набор данных с помощью datum метод, а затем установите атрибуты цвета заливки, цвета обводки и ширины. В конце концов, мы устанавливаем атрибут of d который фактически дает указания для SVG пути о том, где соединить точки пути.

g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);

Вот окончательный результат:

I0yynRDidWlR6HOGbpdSs2aMS6cZJfUNysNt
Линейная диаграмма

Вывод

Поздравляю! Мы успешно создали линейную диаграмму с помощью D3.js. Вы можете просмотреть официальную документацию D3.js, чтобы узнать больше о различных диаграммах и графиках, которые вы можете создавать.

Если вам интересно узнать больше о D3.js, обязательно посмотрите наш бесплатный курс о Scrimba.

Я Сохайб Нехал. Я разработчик полного стека веб-приложений. Вы можете связаться со мной по адресу sohaib.nehal@ymail.com или на Twitter @Sohaib_Nehal. Спасибо 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.