Дізнайтеся 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 для вибору та зміни кольору та розміру шрифту тегу заголовка.

 Learn D3 in 5 minutes

Today is a beautiful day!!

d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');

Отже, ми просто прив’язуємо select()метод до d3об’єкта, а потім виконуємо подальші дії style(). Перший параметр диктує, що ми хочемо змінити, а другий - значення. Ось результат:

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

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

У нашому HTML ми маємо простий невпорядкований список <ul>:

    Ми хочемо створити елементи списку за допомогою об'єкта даних. Ось код для виконання саме цього:

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

    У нашому коді JavaScript вище D3 спочатку вибирає <ul> an d any

  • елементи, de it usщо elect() andмістять методи selectAll (). Може здатися трохи дивним, що ми leвибираємо всі елементи li до того, як ми їх створили, але саме так працює D3.

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

    Іншими словами, він потім додає <li> для кожного елемента даних. Для every

  • Original text


  • тег, він також додає текст усередину t usinметоду text (). ЧТ eпараметр d insidе функцію зворотного виклику текст () відноситься до елементу в масиві при даній ітерації (яблуко, ман О, і так далі).

    Отже, ось наш остаточний результат:

    Створення елементів SVG

    Масштабована векторна графіка (SVG) - це спосіб візуалізації графічних елементів та зображень у DOM. Оскільки SVG базується на векторах, він одночасно легкий і масштабований. D3 використовує SVG для створення всіх своїх візуальних зображень, і тому він є основним будівельним елементом бібліотеки.

    Тут, у прикладі нижче, прямокутник малюється за допомогою D3 у контейнері SVG.

    //Select SVG elementvar svg = d3.select('svg');
    //Create rectangle element inside SVGsvg.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, який нам потрібен для того, щоб відобразити гістограму в нашому vg> tag:

    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 + ")"; });

    In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

    After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

    For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

    We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

    Here’s the result:

    Event Handling

    Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

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

    So when we click the button, the text below appears:

    Conclusion

    D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

    There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

    Thank you :)

    I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)