Как использовать 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 - документы, управляемые данными

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.