freeCodeCamp

2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa8367417b2b2512bcb	Learn About SVG in D3	6		Aprenda sobre o SVG no D3

Description

SVG significa Scalable Vector Graphics . Aqui, "escalável" significa que, se você aumentar ou diminuir o zoom em um objeto, ele não aparecerá pixelizado. Ele é escalável com o sistema de exibição, seja em uma pequena tela móvel ou em um grande monitor de TV. O SVG é usado para fazer formas geométricas comuns. Como o D3 mapeia dados em uma representação visual, ele usa SVG para criar as formas para a visualização. Formas SVG para uma página da web devem ir dentro de uma tag svg HTML. O CSS pode ser escalonável quando os estilos usam unidades relativas (como vh , vw ou porcentagens), mas o uso de SVG é mais flexível para criar visualizações de dados.

Instructions

Adicione um nó svg ao body usando append() . Dê a ele um atributo de width definido para a constante w fornecida e um atributo height definido para a constante h fornecida usando o método attr() para cada um. Você verá na saída porque há uma background-color de fundo rosa aplicada a ela na tag de style . Nota
Os atributos de largura e altura não possuem unidades. Este é o bloco de construção do escalonamento - o elemento sempre terá uma relação largura / altura de 5: 1, independentemente do nível de zoom.

Tests

tests:
  - text: Seu documento deve ter um elemento <code>svg</code> .
    testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
  - text: O elemento <code>svg</code> deve ter um atributo de <code>width</code> definido como 500.
    testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
  - text: O elemento <code>svg</code> deve ter um atributo <code>height</code> definido como 100.
    testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'

Challenge Seed

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

Solution

// solution required

2.8 KiB Raw Blame History