Изучите D3.js за 5 минут

1656643813 izuchite d3js za 5 minut

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

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

1*l5jZdAa3_ZeDSoxHzmIagw

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

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

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

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

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

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

<script src="

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

Выбор DOM

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

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

<html>
<head>
    <title>Learn D3 in 5 minutes</title>
</head>
<body>

<h3>Today is a beautiful day!!</h3>

<script src="

<script>
    d3.select('h3').style('color', 'darkblue');
    d3.select('h3').style('font-size', '24px');
</script>
</body>
</html>

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

1*DHfDsYddhyFresbaU4-P_Q
Пример 1: выбор DOM

Привязка данных

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

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

<ul> </ul>

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

<script>
    var fruits = ['apple', 'mango', 'banana', 'orange'];
    d3.select('ul')
        .selectAll('li')
        .data(fruits)
        .enter()
        .append('li')
        .text(function(d) { return d; });
</script>

В нашем коде JavaScript выше D3 сначала выбирает <ul> и любой <li>элементы внутри него с помощью select() и selectAll() методы Это может показаться несколько странным, что мы выбираем всех li элементов, прежде чем мы создали, но D3 именно так работает.

Затем мы передаем данные с помощью data() способ и доп enter(), работающий как цикл. Все после этого пункта будет выполнено один раз для каждого элемента в fruits массив.

Другими словами, он затем добавляет an<li>для каждого элемента в данных. Для каждого <li>тег, он также добавляет текст к нему с помощью text() метод. Параметр d внутри text() функция обратного вызова ссылается на элемент в массиве на заданной итерации (яблоко, манго и так далее).

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

1*CnImNDBOg4Ei-kAyacb3Xg
Пример 2: связывание данных

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

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

Здесь, в нижеприведенном примере, прямоугольник рисуется с помощью 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() метод.

1*sk3Jxh93HMTUAPeC-_fTRg
Пример 3: Создание элемента SVG

Создание столбчатой ​​диаграммы

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

Давайте начнем с создания SVG тега непосредственно в нашем HTML.

<svg width="200" height="500"></svg>

Затем мы напишем JavaScript, нужный для воспроизведения гистограммы в нашем <svg> тег:

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 и прямоугольника мы передаем наш набор данных с помощью data() метод и вызов enter() чтобы начать цикличность данных.

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

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

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

1*PcGb1csr4o5hZZ7d0ZzqMQ
Пример 4: Создание гистограммы

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

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

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

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

1*DiReX2IfapXHHuSTLThGNg
Пример 5: Обработка событий

Вывод

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

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

Спасибо 🙂

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *