Гантт, день 2

Разобрался как создавать свг-элементы в жс.

Когда браузер получает страницу в хтмл, он пытается понять, что в ней написно и построить у себя внутри древовидную структуру, соотвутствующую исходному хтмл. А потом эту структуру как-то отображает. Нам, программистам, браузер выдает набор функций для манипулирования этой структурой: поиска в ней объектов, создания и добавления новых, удаления старых, и т. п. Такой порядок вещей называется document object model, или DOM для краткости.

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

<svg id="chart">
  <g>
    <text>Событие</text>
    <rect width="400" height="20" x="100"/>
  </g>
</svg>

Благодаря ДОМу можно сделать все то же самое, но на джаваскрипте:

// создаем полоску
let bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");

// снабжаем ее подходящими аттрибутами  
bar.setAttribute('width', 400);
bar.setAttribute('height', '20');
bar.setAttribute('x', 100);

// создаем подпись
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.textContent = "Событие";

// создаем группу
let event = document.createElementNS("http://www.w3.org/2000/svg", "g");

// кладем полоску с подписью внутрь
event.appendChild(text);
event.appendChild(bar);

// находим на странице тег svg
let svg = document.getElementsByTagName('svg')[0];

// добавляем внутрь созданное событие
svg.appendChild(event);

Выглядит довольно громоздко и неудобно. Зато можно написать разнообразные функции для генерации элементов и автоматизировать таким образом их создание. Я так и сделал, теперь на странице с графиком автоматически создается 10 событий, каждый раз новых.