freeCodeCamp

2.1 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

587d7fa7367417b2b2512bc8

Add Classes with D3

src
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js

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