3.4 KiB
3.4 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa6367417b2b2512bc2 | Add Document Elements with D3 |
|
6 | Adicionar elementos do documento com D3 |
Description
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")O D3 permite encadear vários métodos em conjunto com períodos para executar várias ações seguidas.
.append ("li")
.text ("Item muito importante");
Instructions
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 "Aprendizagem D3".
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