---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Inverter elementos SVG
---
## Description
Você deve ter notado que o gráfico de barras estava de cabeça para baixo ou invertido. Isso ocorre porque o SVG usa coordenadas (x, y). No SVG, o ponto de origem das coordenadas está no canto superior esquerdo. Uma coordenada x
de 0 coloca uma forma na borda esquerda da área SVG. Uma coordenada y
de 0 coloca uma forma na borda superior da área SVG. Valores x
altos empurram o retângulo para a direita. Valores maiores y
empurram o retângulo para baixo. Para tornar as barras com o lado direito para cima, você precisa mudar a maneira como a coordenada y
é calculada. Ele precisa considerar tanto a altura da barra quanto a altura total da área SVG. A altura da área SVG é 100. Se você tiver um ponto de dados de 0 no conjunto, você deseja que a barra inicie na parte inferior da área SVG (não no topo). Para fazer isso, a coordenada y
precisa de um valor de 100. Se o valor do ponto de dados fosse 1, você começaria com uma coordenada y
de 100 para definir a barra na parte inferior. Então você precisa considerar a altura da barra de 1, então a coordenada y
final seria 99. A coordenada y
que é y = heightOfSVG - heightOfBar
colocaria as barras com o lado direito para cima.
## Instructions
Altere a função de retorno de chamada para o atributo y
para definir as barras com o lado direito para cima. Lembre-se que a height
da barra é 3 vezes o valor de dados d
. Nota
Em geral, a relação é y = h - m * d
, onde m
é a constante que escala os pontos de dados.
## Tests
```yml
tests:
- text: O primeiro rect
deve ter um valor de y
de 64.
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first rect
should have a y
value of 64.");'
- text: O segundo rect
deve ter um valor de y
de 7.
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second rect
should have a y
value of 7.");'
- text: O terceiro rect
deve ter um valor de y
de 34.
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third rect
should have a y
value of 34.");'
- text: O quarto rect
deve ter um valor de y
de 49.
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth rect
should have a y
value of 49.");'
- text: O quinto rect
deve ter um valor de y
de 25.
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth rect
should have a y
value of 25.");'
- text: O sexto rect
deve ter um valor de y
de 46.
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth rect
should have a y
value of 46.");'
- text: O sétimo rect
deve ter um valor y
de 13.
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh rect
should have a y
value of 13.");'
- text: O oitavo rect
deve ter um valor de y
de 58.
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth rect
should have a y
value of 58.");'
- text: O nono rect
deve ter um valor de y
de 73.
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth rect
should have a y
value of 73.");'
```
## Challenge Seed
## Solution
```js
// solution required
```