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