Узнайте D3.js через 5 минут

Союз Нехал

Введение в создание визуальных представлений ваших данных

D3.js – это библиотека JavaScript, используемая для манипулирования документами на основе данных. Он использует HTML, CSS и SVG для создания визуальных представлений данных, которые можно просматривать на любом современном браузере.

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

В этом руководстве мы рассмотрим основные концепции и особенности D3.JS. Мы узнаем, как использовать его с помощью нескольких примеров, таких как рендеринг диаграммы гистограммы, рендеринг элементов HTML и SVG и нанесение преобразований и событий для них.

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

Начало работы с D3

Как D3.js – это библиотека JavaScript, вы можете просто включить его в файл HTML внутри бирка сценариев.

Полный источник и тесты также доступны Для скачивания на Github.

Выбор DOM

Используя D3.js, мы можем манипулировать моделью объекта документа (DOM), что означает, что мы можем выбрать элементы и применить на них различные преобразования.

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

    



Today is a beautiful day!!

Так что мы просто цепи Выберите () Метод на D3 Объект, а затем выполняется с Стиль () Отказ Первый параметр диктует то, что мы хотим измениться, а вторая дает значение. Вот результат:

Связывание данных

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

В нашем HTML у нас есть простой неупорядоченный список

Мы хотим создать элементы списка с использованием объекта данных. Вот код для выполнения именно:

В вашем коде JavaScript выше D3 сначала выбирает и любой

Затем мы передаем данные с Данные () Метод, и добавить Enter () , который работает как петля. Все после этого момента будет выполнена один раз за пункт в Фрукты множество.

Другими словами, это затем добавляет

Так вот наш окончательный результат:

Создание элементов SVG

Масштабируемая векторная графика (SVG) – это способ рендеринга графических элементов и изображений в DOM. Поскольку SVG является векторным, это как легкий, так и масштабируемый. D3 использует SVG для создания всех его Visuals, и поэтому это основной строительный блок библиотеки.

Здесь в примере ниже прямоугольник рисуется с использованием D3 в контейнере SVG.

//Select SVG element
var svg = d3.select('svg');

//Create rectangle element inside SVG
svg.append('rect')
   .attr('x', 50)
   .attr('y', 50)
   .attr('width', 200)
   .attr('height', 100)
   .attr('fill', 'green');

В этом коде D3 является рендером элемента прямоугольника внутри DOM. Сначала он выбирает элемент SVG, а затем отображает элемент прямоугольника внутри него. Он также устанавливает координаты X и Y прямоугольника вместе со своей шириной, высотой и свойствами заполнения с использованием attr () метод.

Создание гистограммы

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

Начнем, создавая тег SVG прямо в вашем HTML.

Затем мы напишем JavaScript нам нужно для того, чтобы сделать гистограмму в нашем ярлык:

var data = [80, 120, 60, 150, 200];

var barHeight = 20;

var bar = d3.select('svg')
          .selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('width', function(d) {  return d; })
          .attr('height', barHeight - 1)
          .attr('transform', function(d, i) {
            return "translate(0," + i * barHeight + ")";
          });

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

После выбора элементов SVG и прямоугольника мы передаем наш набор набора данных, используя Данные () Метод и звонок Enter () начать зацикливаться на данные.

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

Затем мы преобразуем наши бары, используя свойство Translate, которое будет располагать каждый прямоугольник один за другим, а не начать с одной той же точки. трансформироваться () принимает функцию обратного вызова, которая получает данные и индекс в его параметрах. Мы переводим прямоугольник на оси Y, умножу индекс с высотой бара.

Вот результат:

Обработка событий

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

d3.select('#btn')
        .on('click', function () {
            d3.select('body')
               .append('h3')
               .text('Today is a beautiful day!!');
        });

Поэтому, когда мы нажимаем кнопку, появляется текст ниже:

Заключение

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

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

Спасибо:)

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

Оригинал: “https://www.freecodecamp.org/news/learn-d3-js-in-5-minutes-c5ec29fb0725/”