freeCodeCamp

3.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa7367417b2b2512bc4	Work with Data in D3	6		Trabajar con datos en D3

Description

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".

Instructions

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() .

Tests

tests:
  - text: Su documento debe tener 9 elementos <code>h2</code> .
    testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
  - text: El texto en los elementos <code>h2</code> debe decir &quot;Nuevo título&quot;. La capitalización y el espaciado deben coincidir exactamente.
    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: Su código debe utilizar el método <code>data()</code> .
    testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
  - text: Su código debe utilizar el 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

3.9 KiB Raw Blame History