4.0 KiB
4.0 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc4 | Work with Data in D3 |
|
6 | Trabajar con datos en D3 |
Description
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>Puede parecer confuso seleccionar elementos que aún no existen. Este código le dice a D3 que primero seleccione la
<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>
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
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 "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 <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