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

Пользователь

от velma , в категории: JavaScript , 2 месяца назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от camren , 2 месяца назад

@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.