chore(i18n,curriculum): processed translations (#43008)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: Adicionar uma dica a um elemento D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
||||
# --description--
|
||||
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
Uma dica mostra mais informações sobre um item em uma página quando o usuário passa o mouse por cima do item. Existem várias maneiras de adicionar uma dica a uma visualização. Este desafio usa o elemento SVG `title`.
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` está junto com o método `text()` para adicionar dinamicamente dados às barras.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
Acrescente um elemento `title` sob cada nó de `rect`. Em seguida, chame o método `text()` com uma função de callback para que o texto mostre o valor dos dados.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
O código deve ter 9 elementos `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of `12`.
|
||||
O primeiro elemento `title` deve ter o texto de dica `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of `31`.
|
||||
O segundo elemento `title` deve ter o texto de dica `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of `22`.
|
||||
O terceiro elemento `title` deve ter o texto de dica `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of `17`.
|
||||
O quarto elemento `title` deve ter o texto de dica `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of `25`.
|
||||
O quinto elemento `title` deve ter o texto de dica `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of `18`.
|
||||
O sexto elemento `title` deve ter o texto de dica `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of `29`.
|
||||
O sétimo elemento `title` deve ter o texto de dica `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of `14`.
|
||||
O oitavo elemento `title` deve ter o texto de dica `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of `9`.
|
||||
O nono elemento `title` deve ter o texto de dica `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: Adicionar atributos aos elementos de círculo
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
O último desafio criou os elementos `circle` para cada ponto no `dataset` e anexou-os ao canvas do SVG. Porém, o D3 precisa de mais informações sobre a posição e o tamanho de cada `circle` para exibi-los corretamente.
|
||||
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
Um `circle` em SVG tem três atributos principais. Os atributos `cx` e `cy` são as coordenadas. Elas informam ao D3 onde posicionar o *centro* da forma no canvas do SVG. O raio (atributo `r`) fornece o tamanho de `circle`.
|
||||
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
Assim como ocorre com `rect`, em sua coordenada `y`, o atributo `cy` de um `circle` é medido do topo do canvas do SVG, não da parte inferior.
|
||||
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
Todos os três atributos podem usar uma função de callback para definir seus valores dinamicamente. Lembre-se de que todos os métodos encadeados após `data(dataset)` são executados uma vez por item no `dataset`. O parâmetro `d` na função de callback se refere ao item atual no `dataset`, que é um array para aquele ponto. Use a notação de colchetes, por exemplo `d[0]`, para acessar valores naquele array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
|
||||
Adicione os atributos `cx`, `cy` e `r` aos elementos `circle`. O valor de `cx` deve ser o primeiro número do array para cada item no `dataset`. O valor de `cy` deve ser baseado no segundo número do array, mas certifique-se de mostrar o gráfico voltado para o lado certo, em vez de invertido. O valor de `r` deve ser `5` para todos os círculos.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
O código deve ter 10 elementos `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
|
||||
O primeiro elemento `circle` deve ter um valor `cx` de `34`, um valor `cy` de `422` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +38,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
|
||||
O segundo elemento `circle` deve ter um valor `cx` de `109`, um valor `cy` de `220` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
|
||||
O terceiro elemento `circle` deve ter um valor `cx` de `310`, um valor `cy` de `380` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -58,7 +58,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
|
||||
O quarto elemento `circle` deve ter um valor `cx` de `79`, um valor `cy` de `89` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -68,7 +68,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
|
||||
O quinto elemento `circle` deve ter um valor `cx` de `420`, um valor `cy` de `280` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -78,7 +78,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
|
||||
O sexto elemento `circle` deve ter um valor `cx` de `233`, um valor `cy` de `355` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -88,7 +88,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
|
||||
O sétimo elemento `circle` deve ter um valor `cx` de `333`, um valor `cy` de `404` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -98,7 +98,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
|
||||
O oitavo elemento `circle` deve ter um valor `cx` de `222`, um valor `cy` de `167` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -108,7 +108,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
|
||||
O nono elemento `circle` deve ter um valor `cx` de `78`, um valor `cy` de `180` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
|
||||
O décimo elemento `circle` deve ter um valor `cx` de `21`, um valor `cy` de `377` e um valor `r` de `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: Adicionar eixos a uma visualização
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
Outra maneira de melhorar o diagrama de dispersão é adicionar um eixo x e um eixo y.
|
||||
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
O D3 tem dois métodos, `axisLeft()` e `axisBottom()`, para renderizar o eixo y e o eixo x, respectivamente. Aqui temos um exemplo para criar o eixo x com base na `xScale` dos desafios anteriores:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
O próximo passo é renderizar o eixo no canvas do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento `g`. O `g` representa o grupo. Ao contrário de `rect`, `circle` e `text`, um eixo é apenas uma linha reta quando é renderizado. Por ser uma forma simples, usar `g` funciona. O último passo é aplicar um atributo `transform` para posicionar o eixo no lugar certo no canvas do SVG. Caso contrário, a linha seria renderizada ao longo da borda do canvas do SVG e não seria visível. O SVG suporta diferentes tipos de `transforms`, mas posicionar um eixo precisa de `translate`. Quando aplicado ao elemento `g`, ele move o grupo inteiro para cima e para baixo pelos valores indicados. Exemplo:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
@ -26,21 +26,21 @@ svg.append("g")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
O código acima coloca o eixo x na parte inferior do canvas do SVG. Então, ele é passado como um argumento para o método `call()`. O eixo y funciona da mesma forma, exceto pelo fato de o argumento `translate` estar no formato `(x, 0)`. Como `translate` é uma string no método `attr()` acima, você pode usar a concatenação para incluir valores de variáveis para seus argumentos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
|
||||
O diagrama de dispersão agora tem um eixo x. Crie um eixo y em uma variável chamada `yAxis` usando o método `axisLeft()`. Em seguida, renderize o eixo usando um elemento `g`. Certifique-se de usar o atributo `transform` para mover o eixo pela quantidade de unidades de preenchimento à direita, e `0` unidades para baixo. Lembre-se de usar `call()` para o eixo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
O código deve usar o método `axisLeft()` com `yScale` passado para o argumento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
|
||||
O elemento `g` do eixo y deve ter um atributo `transform` para mover o eixo por `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
O código deve ter uma tag `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
title: Adicionar classes com o D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
@ -8,29 +8,29 @@ dashedName: add-classes-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
|
||||
É difícil de gerenciar diversos estilos inline em elementos do HTML, mesmo para aplicações pequenas. É mais fácil adicionar uma classe aos elementos e estilizar aquela classe uma vez usando as regras de CSS. O D3 tem o método `attr()` para adicionar qualquer atributo HTML a um elemento, incluindo o nome da classe.
|
||||
|
||||
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
|
||||
O método `attr()` funciona da mesma forma que `style()`. Ele recebe valores separados por vírgulas e pode usar uma função de callback. Aqui está um exemplo para adicionar uma classe `container` a uma seleção:
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
|
||||
Observe que o parâmetro `class` permanecerá o mesmo sempre que você precisar adicionar uma classe e que somente o parâmetro `container` mudará.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
|
||||
Adicione o método `attr()` ao código no editor e coloque uma classe `bar` nos elementos `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `div` elements should have a class of `bar`.
|
||||
Os elementos `div` devem ter a classe `bar`.
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
Your code should use the `attr()` method.
|
||||
O código deve usar o método `attr()`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
|
||||
Reference in New Issue
Block a user