Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

RedDeveloper
20.01.2023 06:58
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
В этой статье я расскажу, как я использовал библиотеку d3.js для рисования двумерных фигур в моем проекте Angular.

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

Photo by Lea L on  Unsplash

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

Установка D3

Чтобы установить библиотеку d3 в ваше приложение, выполните следующую команду из консоли npm:

npm install d3

Определите область HTML

Теперь определите определенную область в шаблоне HTML, которую можно рассматривать как холст, на котором мы будем рисовать наши svg-элементы.

<body>
...
<div id="canvas">
</div>
...
</body>

Как показано в приведенном выше фрагменте, мы присвоили идентификатор "canvas" блоку div, который будет выступать в качестве контейнера для всех элементов svg.

Реализация в файле компонента

импортировать библиотеку d3

import * d3 from 'd3';

Чтобы очистить холст от существующих элементов, мы реализуем следующую функцию и вызовем ее как refresh.

d3.selectAll().remove();

Затем создадим слой, который будет подключен к div, обозначенному как "canvas". Мы установим размеры холста с шириной 1920 и высотой 1280. И вернем сгенерированный слой svg, который мы будем использовать для добавления элементов.

generateCanvas(divName = "canvas"){
return d3.select(divName)
.append('svg')
.attr('viewBox',`0 0 1920 1280`)
.attr('svg-content-responsive',true);
}

Теперь начнем загружать или рисовать на svg.

loader(){
let svgCanvas = this.generateCanvas();
this.drawRectangle(svgCanvas);
}

Как нарисовать прямоугольник?

Мы используем svg.append('rect') для добавления прямоугольника.

drawRectangle(canvas){
  canvas.append('rect')
  .style('stroke','black)
  .style('stroke-width',0.5)
  .style('fill','#00FF00')
  .attr('x',120)
  .attr('y',400)
  .attr('width',3500)
  .attr('height',2200)
  .attr('id',`rectangle_${id}`);
}

здесь мы видим, что canvas - это сгенерированный элемент svg, который мы получили из функции generateCanvas.

Мы добавляем к нему прямоугольник и обновляем его свойства. Существует в основном 2 типа свойств: style и attr.

Атрибуты обычно обозначают размер и форму объекта SVG, в то время как стиль обычно указывает на более дизайнерские аспекты объектов SVG, которые вы используете в своей визуализации.

Форма и расположение элементов определяются с помощью атрибутов (x, y, width и т.д.), а внешний вид элемента определяется с помощью стиля (например, заливка, непрозрачность и т.д.).

Как выбрать определенный SVG-элемент по id!

Вы можете выбрать все элементы по типу или идентификаторам непосредственно с помощью функции selectAll(), как показано ниже

canvas.selectAll("span").style("color","#CCC");

Это позволит выбрать все узлы с именем тега "span" в слое canvas и обновить их стиль по мере необходимости. Аналогично мы можем выбрать их по классу, ID и т.д.

Например

Если мы разместили на холсте n-ное количество прямоугольников, кругов, линий и т.д. с идентификаторами, соответствующими их требованиям.

var id = 12;
canvas.append("rect")
....  //rest of the attr and styling
.attr("id",`TeamRed_${id}`);

id++;
canvas.append("rect")
...
.attr("id",`TeamBlue_${id}`);

id++;
canvas.append("circle")
...
.attr("id",`TeamRed_${id}`);

Теперь предположим, что вы хотите применить стилизацию именно к прямоугольным элементам, принадлежащим красной команде, вы можете использовать следующий синтаксис :

canvas.selectAll("rect[id*=\'TeamRed_\'}")
.style("opacity",0.5);

Это позволит найти все прямоугольные элементы, id которых содержит "TeamRed_" в качестве подстроки. Теперь вы можете работать с любым SVG-элементом, основываясь на том, какую терминологию ID вы использовали при его рисовании.

Заключение

В этой статье мы разобрали, как начать работу с библиотекой D3.js, как настроить холст, как рисовать SVG-элементы и условно выбирать эти элементы, чтобы изменять их в соответствии с условиями использования.

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

D3.js - документы, управляемые данными

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg

26.01.2023 14:14

Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной функции ngTemplateOutlet.

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript

26.01.2023 13:19

Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего следующего сайта послужил начальный эпизод "Звездных войн"? 😁

Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot

26.01.2023 09:43

В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .

Начала с розового дизайна
Начала с розового дизайна

25.01.2023 11:01

Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских интерфейсов.

Шлюз в PHP
Шлюз в PHP

25.01.2023 10:51

API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.

14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps

25.01.2023 09:17

проверить тип данных используемой переменной, мы можем просто написать: your_variable=100