Как работает метод append() в D3.js?

@velma 

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

Синтаксис метода append() следующий:

1

selection.append(type)

где selection - это выбранный элемент или группа элементов DOM, а type - это строка, указывающая тип элемента, который необходимо добавить, например, "div", "circle", "text", и т.д.

Например, следующий код создаст новый элемент <div> и добавит его внутрь элемента с идентификатором myDiv:

1
2

d3.select("#myDiv")
  .append("div");

Вы также можете использовать метод append() для добавления нескольких элементов одного типа сразу:

1
2
3

selection.append(type)
    .append(type)
    .append(type);

В этом случае каждый новый элемент будет добавлен в конец предыдущего элемента.

Кроме того, метод append() также может принимать функцию обратного вызова в качестве аргумента, которая будет вызвана для каждого элемента в выборке. Это позволяет динамически создавать элементы на основе данных. Например:

1
2
3
4
5
6

d3.select("#myDiv")
  .selectAll("p")
  .data(myData)
  .enter()
  .append("p")
  .text(function(d) { return d; });

В этом примере метод append() используется для создания новых элементов <p> на основе данных myData. Функция text() используется для установки текстового содержимого каждого элемента <p> равным соответствующему элементу myData.