В этом я объясню, как я использовал библиотеку d3.js для рисования 2D-фигур в моем проекте Angular.
D3.js — это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы будем понимать основные варианты использования этой библиотеки, чтобы удовлетворить наши требования по рисованию 2D-элементов на холсте.
Начиная
Установка D3
Чтобы установить библиотеку d3 в ваше приложение, выполните следующую команду из консоли npm:
npm install d3
Определить область HTML
Теперь определите определенную область в шаблоне HTML, которую можно рассматривать как холст, на котором мы будем рисовать наши элементы svg.
<body> ... <div id="canvas"> </div> ... </body>
Итак, как показано в приведенном выше фрагменте, мы присвоили идентификатор «canvas» блоку div, который будет действовать как контейнер для всех элементов svg.
Реализация в файле компонента
импортировать библиотеку d3
import * d3 from 'd3';
Чтобы удалить существующие элементы с холста, мы реализуем следующую функцию и вызываем ее как обновление.
d3.selectAll().remove();
Затем мы создадим слой, который будет подключен к div, который мы обозначили как «холст». Мы установим размер холста шириной 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 типа свойств: стиль и атрибут.
Атрибуты обычно обозначают размер и форму объекта SVG, а стиль обычно указывает на дополнительные аспекты дизайна объектов SVG, которые вы используете в своей визуализации.
Форма и расположение элементов будут определяться с помощью атрибута (x, y, ширина и т. д.), а внешний вид элемента определяется с помощью стиля (например, заливка, непрозрачность и т. д.).
Как выбрать определенный элемент SVG по идентификатору!
Вы можете выбрать все элементы по типу или идентификаторам напрямую с помощью selectAll(), как показано ниже.
canvas.selectAll("span").style("color","#CCC");
Это выберет все узлы по имени тега «span» в слое холста и при необходимости обновит их стиль. Точно так же мы можем выбрать их по классу, идентификатору и т. д.
Например
Если мы добавим на холст 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);
Это найдет все элементы rect, чей идентификатор содержит «TeamRed_» в качестве подстроки. Итак, теперь вы можете манипулировать любым элементом SVG, основываясь на том, какую терминологию идентификатора вы используете при их рисовании.
Заключение
В этой статье мы поняли, как начать работу с библиотекой D3.js, настроить холст, как рисовать элементы SVG и условно выбирать эти элементы, чтобы изменять их в соответствии с вариантами использования.
Для дальнейшего изучения вы можете попробовать официальную документацию D3.js.
