2.7 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7fa8367417b2b2512bcb	Informazioni su SVG in D3	6	301489	learn-about-svg-in-d3

--description--

SVG sta per Scalable Vector Graphics.

Qui "scalabile" significa che, se si ingrandisce o si rimpicciolisce un oggetto, questo non apparirà pixellato. Esso scala in base al sistema di visualizzazione, che si tratti di un piccolo schermo mobile o di un grande monitor TV.

SVG è usato per creare forme geometriche comuni. Dal momento che D3 mappa i dati in una rappresentazione visuale, utilizza SVG per creare le forme da visualizzare. Le forme SVG per una pagina web devono andare all'interno di un tag HTML svg.

CSS può essere scalabile quando gli stili usano unità relative (come vh, vw, o percentuali), ma usare SVG è più flessibile per creare visualizzazioni di dati.

--instructions--

Aggiungi un nodo svg al body usando append(). Dagli un attributo width impostato alla costante w fornita e un attributo height impostato alla costante h fornita utilizzando i metodi attr() o style() per ciascuno. Lo vedrai nell'output perché c'è un background-color rosa applicato ad esso nel tag style.

Nota: Quando si utilizza attr() la larghezza e l'altezza degli attributi non hanno unità. Questo è la base del ridimensionamento - l'elemento avrà sempre un rapporto tra larghezza e altezza di 5:1, non importa quale sia il livello di zoom.

--hints--

Il tuo documento dovrebbe avere un elemento svg.

assert($('svg').length == 1);

L'elemento svg dovrebbe avere un attributo width impostato a 500 o dovrebbe essere stilizzato in modo da avere una larghezza di 500px.

assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');

L'elemento svg dovrebbe avere un attributo height impostato a 100 o dovrebbe essere stilizzato in modo da avere un'altezza di 100px.

assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');

--seed--

--seed-contents--

<style>
  svg {
    background-color: pink;
  }
</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")
                  // Add your code below this line



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

--solutions--

<style>
  svg {
    background-color: pink;
  }
</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)
  </script>
</body>

2.7 KiB Raw Blame History