freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7faa367417b2b2512bd4	Add a Hover Effect to a D3 Element	6		Añadir un efecto de desplazamiento sobre un elemento D3

Description

Es posible agregar efectos que resalten una barra cuando el usuario se desplaza sobre ella con el mouse. Hasta ahora, el estilo de los rectángulos se aplica con los métodos D3 y SVG incorporados, pero también se puede usar CSS. Establece la clase CSS en los elementos SVG con el método attr() . Luego, la pseudo-clase :hover para su nueva clase contiene las reglas de estilo para cualquier efecto de hover.

Instructions

Use el método attr() para agregar una clase de bar a todos los elementos rect . Esto cambia el color de fill de la barra a marrón cuando pasas el mouse sobre ella.

Tests

tests:
  - text: Tus elementos <code>rect</code> deben tener una clase de <code>bar</code> .
    testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'

Challenge Seed

<style>
  .bar:hover {
    fill: brown;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d)
       .attr("width", 25)
       .attr("height", (d, i) => 3 * d)
       .attr("fill", "navy")
       // Add your code below this line



       // Add your code above this line

    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) => d)
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - (3 * d) - 3);

  </script>
</body>

Solution

// solution required

2.2 KiB Raw Blame History