3.8 KiB
3.8 KiB
id, title, challengeType, videoUrl, localeTitle
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| 587d7fa7367417b2b2512bc4 | Work with Data in D3 | 6 | Trabalhar com dados no D3 |
Description
data() é usado em uma seleção de elementos DOM para anexar os dados a esses elementos. O conjunto de dados é passado como um argumento para o método. Um padrão de fluxo de trabalho comum é criar um novo elemento no documento para cada parte dos dados no conjunto. D3 tem o método enter() para esse propósito. Quando enter() é combinado com o método data() , ele verifica os elementos selecionados da página e compara-os com o número de itens de dados no conjunto. Se houver menos elementos que itens de dados, ele criará os elementos ausentes. Aqui está um exemplo que seleciona um elemento ul e cria um novo item de lista com base no número de entradas na matriz: <body>Pode parecer confuso selecionar elementos que ainda não existem. Este código está dizendo ao D3 para selecionar primeiro o
<ul> </ ul>
<script>
conjunto de dados const = ["a", "b", "c"];
d3.select ("ul"). selectAll ("li")
.data (conjunto de dados)
.entrar()
.append ("li")
.text ("Novo item");
</ script>
</ body>
ul na página. Em seguida, selecione todos os itens da lista, que retornam uma seleção vazia. Em seguida, o método data() revisa o conjunto de dados e executa o código a seguir três vezes, uma vez para cada item na matriz. O método enter() vê que não há elementos li na página, mas precisa de 3 (um para cada parte dos dados no dataset ). Novos elementos li são anexados ao ul e possuem o texto "Novo item". Instructions
body , em seguida, selecione todos os elementos h2 . Faça o D3 criar e anexar uma tag h2 para cada item na matriz do dataset . O texto no h2 deve dizer "novo título". Seu código deve usar os métodos data() e enter() . Tests
tests:
- text: Seu documento deve ter 9 elementos <code>h2</code> .
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
- text: O texto nos elementos <code>h2</code> deve dizer "Novo Título". A capitalização e o espaçamento devem corresponder exatamente.
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
- text: Seu código deve usar o método <code>data()</code> .
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Seu código deve usar o método <code>enter()</code> .
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
Challenge Seed
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// Add your code below this line
// Add your code above this line
</script>
</body>
Solution
// solution required