freeCodeCamp/add-document-elements-with-d3.russian.md at 6db0c1e71b51b8246eec28b5cba5e1a7a766081d

Files

Valeriy S 12f65a6742 fix(curriculum): fix challenges for russian language

2019-09-18 12:05:38 +05:30

3.9 KiB

Raw Blame History

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
587d7fa6367417b2b2512bc2	Add Document Elements with D3	6	301474	Добавление элементов документа с помощью 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: The <code>body</code> should have one <code>h1</code> element.
    testString: assert($('body').children('h1').length == 1);
  - text: The <code>h1</code> element should have the text "Learning D3" in it.
    testString: assert($('h1').text() == "Learning D3");
  - text: Your code should access the <code>d3</code> object.
    testString: assert(code.match(/d3/g));
  - text: Your code should use the <code>select</code> method.
    testString: assert(code.match(/\.select/g));
  - text: Your code should use the <code>append</code> method.
    testString: assert(code.match(/\.append/g));
  - text: Your code should use the <code>text</code> method.
    testString: assert(code.match(/\.text/g));

Challenge Seed

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



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

Solution

// solution required

3.9 KiB Raw Blame History Unescape Escape