freeCodeCamp/add-classes-with-d3.spanish.md at f5b94b51f1b7a926554be73b42ab8b5db822ce77

Files

Kristofer Koishigawa 84e28bd0f0 fix(challenges): update required links for d3 challenges (#34477 )

2019-02-08 09:37:46 +03:00

2.1 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d7fa7367417b2b2512bc8	Add Classes with D3	6		Añadir clases con D3

Description

Usar una gran cantidad de estilos en línea en elementos HTML es difícil de administrar, incluso para aplicaciones más pequeñas. Es más fácil agregar una clase a los elementos y diseñar esa clase una vez utilizando las reglas CSS. D3 tiene el método attr() para agregar cualquier atributo HTML a un elemento, incluido un nombre de clase. El método attr() funciona de la misma manera que el style() . Toma valores separados por comas y puede usar una función de devolución de llamada. Aquí hay un ejemplo para agregar una clase de "contenedor" a una selección: selection.attr("class", "container");

Instructions

Agregue el método attr() al código en el editor y coloque una clase de bar en los elementos div .

Tests

tests:
  - text: Tus elementos <code>div</code> deben tener una clase de <code>bar</code> .
    testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
  - text: Su código debe utilizar el método <code>attr()</code> .
    testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'

Challenge Seed

<style>
  .bar {
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      // Add your code below this line



      // Add your code above this line
  </script>
</body>

Solution

// solution required

2.1 KiB Raw Blame History