freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa6367417b2b2512bc2	Add Document Elements with D3	6		Adicionar elementos do documento com D3

Description

O D3 possui vários métodos que permitem adicionar e alterar elementos no documento. O método select() seleciona um elemento do documento. Leva um argumento para o nome do elemento desejado e retorna um nó HTML para o primeiro elemento no documento que corresponde ao nome. Aqui está um exemplo: const anchor = d3.select("a"); O exemplo acima encontra a primeira tag âncora na página e salva um nó HTML para ela na anchor da variável. Você pode usar a seleção com outros métodos. A parte "d3" do exemplo é uma referência ao objeto D3, que é como você acessa os métodos D3. Dois outros métodos úteis são append() e text() . O método append() recebe um argumento para o elemento que você deseja adicionar ao documento. Ele anexa um nó HTML a um item selecionado e retorna um identificador para esse nó. O método text() define o texto do nó selecionado ou obtém o texto atual. Para definir o valor, você passa uma string como um argumento dentro dos parênteses do método. Aqui está um exemplo que seleciona uma lista não ordenada, acrescenta um item de lista e adiciona texto:

d3.select ("ul")
.append ("li")
.text ("Item muito importante");

O D3 permite encadear vários métodos em conjunto com períodos para executar várias ações seguidas.

Instructions

Use o método select para selecionar a tag body no documento. Em seguida, append uma tag h1 a ela e adicione o texto "Learning D3" no elemento h1 .

Tests

tests:
  - text: O <code>body</code> deve ter um elemento <code>h1</code> .
    testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
  - text: O elemento <code>h1</code> deve ter o texto &quot;Aprendizagem D3&quot;.
    testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
  - text: Seu código deve acessar o objeto <code>d3</code> .
    testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
  - text: Seu código deve usar o método <code>select</code> .
    testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
  - text: Seu código deve usar o método <code>append</code> .
    testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
  - text: Seu código deve usar o método de <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

3.3 KiB Raw Blame History