mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-13 16:04:36 -04:00

Files

camperbot 485b4772c6 chore(i18n,learn): processed translations (#50821 )

2023-06-26 19:56:15 +05:30

3.6 KiB

Raw Blame History

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7faa367417b2b2512bd6	Füge einem D3-Element einen Tooltip hinzu	6	301470	add-a-tooltip-to-a-d3-element

--description--

Ein Tooltip zeigt mehr Informationen über ein Element auf einer Seite an, wenn der User über das Element fährt. Es gibt mehrere Möglichkeiten einer Visualisierung einen Tooltip hinzuzufügen. Diese Aufgabe verwendet das SVG title-Element.

title wird mit der text()-Methode gekoppelt, um dynamisch Daten zu den Balken hinzuzufügen.

--instructions--

Füge ein title-Element unter jedem rect-Punkt hinzu. Rufe dann die text()-Methode mit einer Callback-Funktion auf, so dass der Text den Datenwert anzeigt.

--hints--

Dein Code sollte 9 title-Elemente haben.

assert($('title').length == 9);

Das erste title-Element sollte einen Tooltip-Text von 12 haben.

assert($('title').eq(0).text() == '12');

Das zweite title-Element sollte einen Tooltip-Text von 31 haben.

assert($('title').eq(1).text() == '31');

Das dritte title-Element sollte einen Tooltip-Text von 22 haben.

assert($('title').eq(2).text() == '22');

Das vierte title-Elemente sollte einen Tooltip-Text von 17 haben.

assert($('title').eq(3).text() == '17');

Das fünfte title-Element sollte einen Tooltip-Text von 25 haben.

assert($('title').eq(4).text() == '25');

Das sechste title-Element sollte einen Tooltip von 18 haben.

assert($('title').eq(5).text() == '18');

Das siebte title-Element sollte einen Tooltip-Text von 29 haben.

assert($('title').eq(6).text() == '29');

Das achte title-Element sollte einen Tooltip-Text von 14 haben.

assert($('title').eq(7).text() == '14');

Das neunte title-Element sollte einen Tooltip-Text von 9 haben.

assert($('title').eq(8).text() == '9');

--seed--

--seed-contents--

<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>

--solutions--

<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")
       .append("title")
       .text((d) => d)


    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>

3.6 KiB Raw Blame History