2.4 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7faa367417b2b2512bd3	Aggiungere stili alle etichette D3	6	301492	style-d3-labels

--description--

I metodi D3 possono aggiungere stili alle etichette delle barre. L'attributo fill (riempimento) imposta il colore del testo per un nodo text. Il metodo style() imposta regole CSS per altri stili, come font-family o font-size.

--instructions--

Imposta la dimensione font-size degli elementi text a 25px e il colore del testo a rosso.

--hints--

Le barre dovrebbero avere tutte un colore di riempimento (fill) rosso.

assert($('text').css('fill') == 'rgb(255, 0, 0)');

Le etichette dovrebbero avere tutte un font-size di 25 pixel.

assert($('text').css('font-size') == '25px');

--seed--

--seed-contents--

<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");

    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)
       // Add your code below this line



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

--solutions--

<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");

    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)
       .style("font-size", 25)
       .attr("fill", "red")
  </script>
</body>

2.4 KiB Raw Blame History