Навчіться створювати гістограму за допомогою D3 - Підручник для початківців

D3.js - найпопулярніша бібліотека JavaScript для створення візуальних зображень ваших даних. Однак навчитися трохи складно, тому я вважаю, що важливо починати м’яко.

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

Ми також створили безкоштовний курс D3.js на Scrimba. Перевірте тут.

Тепер давайте почнемо.

Налаштування

Ми використаємо найпростіші можливості налаштування, просто імпортуючи бібліотеку D3 з CDN.

Ми напишемо наш код D3 у тезі сценарію. По-друге, ми додали елемент до DOM. Якщо ви хочете пограти з кодом, читаючи цей підручник, перегляньте цей ігровий майданчик Scrimba, який містить остаточну версію коду.

Перше, що ми збираємося зробити, це вибрати цей елемент і трохи стилізувати його.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Ми надаємо йому ширину та висоту, плюс .bar-chartклас. У нашому CSS ми створили клас таким чином:

.bar-chart { background-color: #C7D9D9; } 

Ось результат:

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

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

вибрати все()

Перше, що ми робимо, може здатися трохи дивним, ми робимо .selectAll("rect"), однак, ми ще не створили жодного елемента. Отже, цей метод повертає порожній вибір (порожній масив). Однак ми скоро створимо елементи за допомогою enter().append().

Це може здатися дещо заплутаним. Але пояснити, як це selectAll()працює в поєднанні з, enter().append()виходить за рамки цього посібника. Якщо ви хочете зрозуміти це правильно, дуже уважно прочитайте цю статтю.

дані ()

Потім ми зв’язуємо data()метод і передаємо в наш набір даних. Дані в підсумку визначатимуть висоту кожного стовпчика.

enter ()

Наступним кроком є ​​ланцюжок enter()методу. enter()Виглядає як в наборі даних, переданих в data()  і при виборі ми зробили з selectAll('rect'), а потім він намагається шукати «матчі.» Таким чином, це створює відображення між вашими даними та DOM.

Але пам’ятайте, selectAll('rect')метод повернув порожній виділений фрагмент, оскільки в DOM ще немає елементів. Однак набір даних містить дев'ять елементів. Отже, немає "сірників".

Потім enter()метод дозволяє створити новий елемент у DOM для кожного елемента набору даних, який ще не має відповідного елемента.

додати ()

У наступному рядку ми додаємо елемент для кожного з елементів. Як випливає з цього методу enter(), він буде фактично виконуватися дев'ять разів, по одному для кожної точки даних, якій не вистачає відповідного в DOM.

attr ()

Наступним кроком є ​​визначення форми кожного з прямокутників (наших брусків). Ми повинні дати йому чотири атрибути: висота, ширина, х-позиції і у позиції . Ми використаємо attr()метод для всіх цих.

Почнемо з положення Y:

.attr("y", function(d) { return svgHeight - d }) 

Перший параметр диктує, який атрибут ми хочемо додати: у цьому випадку координату y стовпчика. У другому, ми отримуємо доступ до функції зворотного виклику, в якій ми збираємось повернути значення, яке ми хочемо, щоб мав наш атрибут.

Тут ми отримуємо доступ до точки даних на цьому етапі процесу ітерації (пам’ятайте, цей метод викликається один раз на елемент у datasetмасиві). Точка даних зберігається в dаргументі. Потім ми віднімемо задану точку даних d, з висоти нашого контейнера SVG.

Координати X та y завжди обчислюються, починаючи з верхнього лівого кута. Отже, коли ми віднімаємо висоту контейнера зі dзначенням, отримуємо координату y для верхньої частини панелі.

Щоб панель тягнулася від цієї точки до нижньої частини контейнера SVG, нам потрібно буде надати їй висоту, еквівалентну значенню точки даних:

.attr("height", function(d) { return d; }) 

Наступним кроком є ​​надання йому ширини:

.attr ("ширина", barWidth - barPadding)

Тут ми просто передаємо простий вираз на відміну від функції зворотного виклику, оскільки нам не потрібен доступ до точки даних. Ми просто беремо за основу barWidthзмінну, яку ми створили далі, тобто загальну ширину контейнера, поділену на кількість стовпчиків. Для того, щоб отримати невеликий зазор між кожною смугою, ми також віднімемо відступ, який ми визначили як 5.

Останній крок - встановлення координат x. Цей вираз трохи складніший:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Тут ми перш за все , скориставшись другим параметром в функцію зворотного виклику, i. Це індекс даного елемента в масиві.

To set the coordinate for each of the bars, we’ll simply multiply the index with the barWidth variable. We’ll then return a string value which describes the transformation for the x-axis, for example "translate(100)". That would push the bar 100 pixels to the right.

And just like that, you have your very first bar chart in D3.js.

If you’re interested in learning more about D3.js, be sure to check out our free course on Scrimba.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.