freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7faa367417b2b2512bd6	Add a Tooltip to a D3 Element	6		Añadir una información sobre herramientas a un elemento D3

Description

Una información sobre herramientas muestra más información sobre un elemento en una página cuando el usuario se desplaza sobre ese elemento. Hay varias formas de agregar información sobre herramientas a una visualización, este desafío utiliza el elemento de title SVG. title combinan con el método text() para agregar dinámicamente datos a las barras.

Instructions

Agregue un elemento de title debajo de cada nodo rect . Luego llame al método text() con una función de devolución de llamada para que el texto muestre el valor de los datos.

Tests

tests:
  - text: Su código debe tener 9 elementos de <code>title</code> .
    testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
  - text: El primer elemento de <code>title</code> debe tener un texto de información sobre herramientas de 12.
    testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
  - text: El segundo elemento del <code>title</code> debe tener un texto de información sobre herramientas de 31.
    testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
  - text: El tercer elemento del <code>title</code> debe tener un texto de información sobre herramientas de 22.
    testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
  - text: El cuarto elemento del <code>title</code> debe tener un texto de información sobre herramientas de 17.
    testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
  - text: El quinto elemento del <code>title</code> debe tener un texto de información sobre herramientas de 25.
    testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
  - text: El sexto elemento del <code>title</code> debe tener un texto de información sobre herramientas de 18.
    testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
  - text: El séptimo elemento del <code>title</code> debe tener un texto de información sobre herramientas de 29.
    testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
  - text: El octavo elemento del <code>title</code> debe tener un texto de información sobre herramientas de 14.
    testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
  - text: El noveno elemento de <code>title</code> debe tener un texto de información sobre herramientas de 9.
    testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'

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) => d * 3)
       .attr("fill", "navy")
       .attr("class", "bar")
       // 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 - (d * 3 + 3))

  </script>
</body>

Solution

// solution required

4.3 KiB Raw Blame History