freeCodeCamp

4.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa6367417b2b2512bc2	Add Document Elements with D3	6		Добавление элементов документа с помощью D3

Description

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

d3.select ( "UL")
.append ( "Ли")
.text («Очень важный элемент»);

D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.

Instructions

Используйте метод select для выбора тега body в документе. Затем append к нему тег h1 и добавьте текст «Learning D3» в элемент h1 .

Tests

tests:
  - text: <code>body</code> должно иметь один элемент <code>h1</code> .
    testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
  - text: Элемент <code>h1</code> должен иметь в нем текст «Learning D3».
    testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
  - text: Ваш код должен получить доступ к объекту <code>d3</code> .
    testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
  - text: Ваш код должен использовать метод <code>select</code> .
    testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
  - text: Ваш код должен использовать метод <code>append</code> .
    testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
  - text: Ваш код должен использовать <code>text</code> метод.
    testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'

Challenge Seed

<body>
  <script>
    // Add your code below this line



    // Add your code above this line
  </script>
</body>

Solution

// solution required

4.4 KiB Raw Blame History Unescape Escape