Здравствуйте, коллеги по JavaScripters, меня зовут Норберт Ронаи, и я хочу поделиться с вами своим опытом работы с D3.js, библиотекой JS (да, еще одной библиотекой JavaScript).
Я студент Университета математики и компьютерных наук Babes Bolyai в Клуж-Напока и разработчик JavaScript в компании Evozon System.
Но хватит обо мне, давайте начнем.
Что такое D3.js?
D3.js означает документы, управляемые данными. Впервые он был выпущен 6 лет назад (версия 2.0.0), но в этом году, 24 марта, была выпущена стабильная версия (4.8.0).
Это отличный инструмент для создания динамического и интерактивного визуального представления даты в веб-браузерах. Я рекомендую его всякий раз, когда вы чувствуете потребность в создании быстрых и причудливых элементов. Это также помогает вам переносить данные в DOM (объектную модель документа), используя только HTML, SVG и CSS. Это действительно быстро, он поддерживает большие наборы данных и динамическое поведение для взаимодействия и анимации, позволяя повторно использовать код для разнообразного набора плагинов и компонентов.
Настройка очень проста:
1) Скачайте последнюю версию;
2) Воспользуйтесь библиотекой:
<script src=”d3.js”></script>
Почему я использую D3.js?
Вы, наверное, устали читать об еще одной новой библиотеке JavaScript, вероятно, каждый день появляется новая. Так почему я использую D3.js и беспокою вас этой статьей?
Ну, как я уже сказал, я все еще студент, и, как и любой другой новичок, у меня есть домашние задания / проекты из моего университета и задачи, которые мне нужно выполнить на работе, поэтому мое расписание довольно плотно. Мне нужно было что-то простое и быстрое, что помогло бы мне создавать интерактивные элементы для моих школьных проектов, а также для работы.
Одной из моих задач было создать компоненты диаграммы, чтобы показать некоторые изменения температуры за определенный период времени. Я воспользовался возможностями, которые дает эта библиотека, поэтому начал ее использовать, и, черт возьми, она мне очень помогла. Чтобы показать вам пример, я возьму простой элемент диаграммы, чтобы показать вам различия в использовании D3.js:
Кодирование диаграммы вручную
<style>
.chart div {
font: 10px sans-serif;
text-align: right;
background-color: red;
color: white;
padding: 4px;
margin: 2px;
}
</style>
<div class=”chart”>
<div style=”width: 50px;”>15</div>
<div style=”width: 160px;”>16</div>
<div style=”width: 80px;”>8</div>
<div style=”width: 100px;”>10</div>
<div style=”width: 30px;”>3</div>
<div style=”width: 350px;”>35</div>
</div>
Как видите, это не очень практично, потому что позже, если вам нужно что-то изменить, вам придется перезаписать новые элементы или удалить их, а мы все знаем, что программирование работает не так. Или, по крайней мере, так работать не должно.
Кодирование диаграммы способом D3.js
<style>
.chart div {
font: 10px sans-serif;
text-align: right;
background-color: #00cc66;
color: white;
padding: 20px;
margin: 5px;
}
</style>
<div class=”chart”></div>
<script src=”d3.js”></script>
<script>
var data = [8, 16, 18, 20, 18, 35, 22, 25, 27];
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(“.chart”)
.selectAll(“div”)
.data(data)
.enter().append(“div”)
.style(“width”, function(d) { return x(d) + “px”; }) .text(function(d) { return d; });
</script>
Даже если это кажется более сложным и трудным для понимания, на самом деле это не так. Если вы присмотритесь, то увидите, что select («. Chart») и .selectAll («div») просто выбрать элементы, которые вы хотите обновить, .data (data) просто связывает значения данных для каждого элемента div; .enter (). append («div») в случае, если тегов div недостаточно, они будут созданы для вас, и все они будут иметь следующие свойства .style («ширина», функция (d) {return x (d) + «px»;}) и .text (function (d) {return d;}); где d - переменная из данных.
Также var x = d3. scaleLinear () .domain ([0, d3.max (data)]). Range ([0, 420]); - отображение пространства данных (домена), отображающего пространство (диапазон).
Вот результат:
D3.js, еще одна библиотека JavaScript, которую стоит изучить?
Как младший разработчик я знаю, насколько ошеломляющим может быть рассмотрение обширной экосистемы, которую представляет JavaScript. Иногда хочется просто свернуться клубочком и поплакать. Но многие библиотеки очень полезны и могут значительно облегчить вашу жизнь и сэкономить много времени.
На этот раз мне помог D3.js, это не просто фреймворк, который стремится предоставить полезные функции. Он решает основные проблемы: эффективное манипулирование документами на основе данных, обеспечивающее большую гибкость, также позволяет избежать частного представления.
Я настоятельно рекомендую его, вы можете хотя бы ненадолго использовать его в эксперименте, не из-за простоты его использования, а в большей степени из-за его сложного способа манипулирования данными из DOM. Даже если он в значительной степени полагается на поставщиков браузеров, каждый раз, когда появляется новая функция, вы сможете сразу же ее использовать.
