Добавление элементов документа с помощью D3
D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод select()
выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: const anchor = d3.select("a");
Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном anchor
. Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: append()
и text()
. Метод append()
принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод text()
либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст:
d3.select ( "UL")D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.
.append ( "Ли")
.text («Очень важный элемент»);
Используйте метод select
для выбора тега body
в документе. Затем append
к нему тег h1
и добавьте текст «Learning D3» в элемент h1
.