2.9 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa8367417b2b2512bcc | Exibir formas com o SVG | 6 | 301485 | display-shapes-with-svg |
--description--
O último desafio criou um elemento svg com uma determinada largura e altura, que era visível porque tinha uma background-color aplicada a ele na tag style. O código criou espaço para a largura e altura fornecidas.
O próximo passo é criar uma forma para colocar na área do svg. Há várias formas suportadas no SVG, como retângulos e círculos. Elas são usadas para exibir dados. Por exemplo, a forma do retângulo (<rect>) do SVG pode criar uma barra em um gráfico de barras.
Quando você coloca uma forma na área do svg, você pode especificar onde ela vai com as coordenadas x e y. O ponto de origem (0, 0) está no canto superior esquerdo. Valores positivos para x empurram a forma para a direita, enquanto valores positivos para y empurram a forma para baixo do ponto de origem.
Para colocar uma forma no meio do svg de 500 (largura) x 100 (altura) do último desafio, a coordenada x seria 250 e a coordenada y seria 50.
Uma forma rect do SVG tem quatro atributos. Existem as coordenadas x e y, para onde elas são colocadas na área do svg. Ela também tem height e width para especificar o tamanho.
--instructions--
Adicione uma forma rect ao svg usando append(). Dê a ele um atributo width de 25 e uma height de 100. Além disso, dê aos atributos de rect, x e y, o valor de 0.
--hints--
O documento deve ter 1 elemento rect.
assert($('rect').length == 1);
O elemento rect deve ter um atributo width com o valor de 25.
assert($('rect').attr('width') == '25');
O elemento rect deve ter um atributo height com o valor de 100.
assert($('rect').attr('height') == '100');
O elemento rect deve ter um atributo x com o valor de 0.
assert($('rect').attr('x') == '0');
O elemento rect deve ter um atributo y com o valor de 0.
assert($('rect').attr('y') == '0');
--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)
// 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)
.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
</script>
</body>