La biblioteca D3 se centra en un enfoque basado en datos. Cuando tiene un conjunto de datos, puede aplicar los métodos D3 para mostrarlos en la página. Los datos vienen en muchos formatos, pero este desafío utiliza una simple variedad de números. El primer paso es hacer que D3 esté al tanto de los datos. El método data() se usa en una selección de elementos DOM para adjuntar los datos a esos elementos. El conjunto de datos se pasa como un argumento al método. Un patrón de flujo de trabajo común es crear un nuevo elemento en el documento para cada dato del conjunto. D3 tiene el método enter() para este propósito. Cuando enter() se combina con el método data() , observa los elementos seleccionados de la página y los compara con la cantidad de elementos de datos en el conjunto. Si hay menos elementos que elementos de datos, crea los elementos que faltan. Aquí hay un ejemplo que selecciona un elemento ul y crea un nuevo elemento de lista basado en el número de entradas en la matriz:

<body>
<ul> </ul>
<script>
conjunto de datos const = ["a", "b", "c"];
d3.select ("ul"). selectAll ("li")
.data (conjunto de datos)
.entrar()
.append ("li")
.text ("Nuevo elemento");
</script>
</body>

Puede parecer confuso seleccionar elementos que aún no existen. Este código le dice a D3 que primero seleccione la ul en la página. A continuación, seleccione todos los elementos de la lista, lo que devuelve una selección vacía. Luego, el método data() revisa el conjunto de datos y ejecuta el siguiente código tres veces, una para cada elemento de la matriz. El método enter() ve que no hay elementos li en la página, pero necesita 3 (uno para cada dato en el dataset de dataset ). Los nuevos elementos de li se agregan a la ul y tienen el texto "Nuevo elemento".

Seleccione el nodo del body , luego seleccione todos los elementos h2 . Haga que D3 cree y agregue una etiqueta h2 para cada elemento en la matriz del dataset . El texto en el h2 debe decir "Nuevo título". Su código debe usar los métodos data() y enter() .

```yml tests: - text: Su documento debe tener 9 elementos h2 . testString: 'assert($("h2").length == 9, "Your document should have 9 h2 elements.");' - text: El texto en los elementos h2 debe decir "Nuevo título". La capitalización y el espaciado deben coincidir exactamente. testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the h2 elements should say "New Title". The capitalization and spacing should match exactly.");' - text: Su código debe utilizar el método data() . testString: 'assert(code.match(/\.data/g), "Your code should use the data() method.");' - text: Su código debe utilizar el método enter() . testString: 'assert(code.match(/\.enter/g), "Your code should use the enter() method.");' ```