freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa6367417b2b2512bc2	Add Document Elements with D3	6		Añadir elementos de documento con D3

Description

D3 tiene varios métodos que le permiten agregar y cambiar elementos en su documento. El método select() selecciona un elemento del documento. Toma un argumento para el nombre del elemento que desea y devuelve un nodo HTML para el primer elemento del documento que coincide con el nombre. Aquí hay un ejemplo: const anchor = d3.select("a"); El ejemplo anterior encuentra la primera etiqueta de anclaje en la página y guarda un nodo HTML para ella en el anchor la variable. Puede utilizar la selección con otros métodos. La parte "d3" del ejemplo es una referencia al objeto D3, que es cómo acceder a los métodos D3. Otros dos métodos útiles son append() y text() . El método append() toma un argumento para el elemento que desea agregar al documento. Agrega un nodo HTML a un elemento seleccionado y devuelve un identificador a ese nodo. El método text() establece el texto del nodo seleccionado o obtiene el texto actual. Para establecer el valor, se pasa una cadena como un argumento dentro de los paréntesis del método. Aquí hay un ejemplo que selecciona una lista desordenada, agrega un elemento de lista y agrega texto:

d3.seleccionar ("ul")
.append ("li")
.text ("Elemento muy importante");

D3 le permite encadenar varios métodos junto con puntos para realizar varias acciones seguidas.

Instructions

Utilice el select método para seleccionar el body la etiqueta en el documento. Luego, append una etiqueta h1 y agregue el texto "Aprendizaje D3" en el elemento h1 .

Tests

tests:
  - text: El <code>body</code> debe tener un elemento <code>h1</code> .
    testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
  - text: El elemento <code>h1</code> debe tener el texto &quot;Aprendizaje D3&quot; en él.
    testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
  - text: Su código debe acceder al objeto <code>d3</code> .
    testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
  - text: Su código debe utilizar el método de <code>select</code> .
    testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
  - text: Su código debe utilizar el método de <code>append</code> .
    testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
  - text: Su código debe utilizar el 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

3.4 KiB Raw Blame History