Учитесь создавать диаграмму линии, используя D3.js

Союз Нехал

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

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

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

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

Начиная

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

Мы также добавили Метка внутри нашего 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       })});

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

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

Данные анализа

.....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, сначала выбирая его с помощью Выберите () метод, а затем используя attr () Метод назначить атрибуты.

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

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

До сих пор у нас ничего нет внутри нашего дома:

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

Создать и преобразовывать элемент группы

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

Группировка элементов помогает организовать аналогичные или связанные элементы вместе. Здесь, после рендеринга элемента группы, мы предоставляем ему некоторые преобразования.

D3 дает нам различные варианты для преобразования наших элементов. В указанном выше коде мы используем Перевести Свойство, чтобы переместить наш групповой элемент с полями слева и вершины.

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

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

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 принимает параметр х который определяется в Добавить весы раздел.

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 Метод, который принимает параметр у . Затем мы также стимулируем нашу ось, назначив ее разные атрибуты и метку.

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

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

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

Продам наш набор набора данных, используя Датум Метод, а затем установите атрибуты цвета заполнения, цвет хода и ширина. В конце концов, мы устанавливаем атрибут 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);

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

Заключение

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

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

Я Союз Нехал. Я являюсь разработчиком веб-приложений Full-Stack. Вы можете связаться со мной в Sohaib.Nehal@ymail.com или в Twitter @sohaib_nehal. Спасибо:-)

Оригинал: “https://www.freecodecamp.org/news/learn-to-create-a-line-chart-using-d3-js-4f43f1ee716b/”