chore(i18n,curriculum): processed translations (#42697)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: Aggiungere un suggerimento a un 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.
|
||||
Un suggerimento (tooltip) mostra maggiori informazioni su un elemento in una pagina quando l'utente passa sopra di esso. Ci sono diversi modi per aggiungere un suggerimento a una visualizzazione, questa sfida utilizza l'elemento SVG `title`.
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` va in coppia con il metodo `text()` per aggiungere dinamicamente dati alle barre.
|
||||
|
||||
# --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.
|
||||
Aggiungi un elemento `title` sotto ogni nodo `rect`. Quindi chiama il metodo `text()` con una funzione di callback in modo che il testo mostri il valore dei dati.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
Il tuo codice dovrebbe avere 9 elementi `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of `12`.
|
||||
Il primo elemento `title` dovrebbe avere un testo tooltip di `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of `31`.
|
||||
Il secondo elemento `title` dovrebbe avere un testo tooltip di `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of `22`.
|
||||
Il terzo elemento `title` dovrebbe avere un testo tooltip di `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of `17`.
|
||||
Il quarto elemento `title` dovrebbe avere un testo tooltip di `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of `25`.
|
||||
Il quinto elemento `title` dovrebbe avere un testo tooltip di `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of `18`.
|
||||
Il sesto elemento `title` dovrebbe avere un testo tooltip di `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of `29`.
|
||||
Il settimo elemento `title` dovrebbe avere un testo tooltip di `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of `14`.
|
||||
L'ottavo elemento `title` dovrebbe avere un testo tooltip di `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of `9`.
|
||||
Il nono elemento `title` dovrebbe avere un testo tooltip di `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
@ -160,7 +160,7 @@ assert($('title').eq(8).text() == '9');
|
||||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: Aggiungere attributi agli elementi cerchio
|
||||
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.
|
||||
L'ultima sfida ha creato gli elementi `circle` per ogni punto nel `dataset` e li ha aggiunti alla tela SVG. Ma D3 ha bisogno di ulteriori informazioni sulla posizione e la dimensione di ogni `circle` per visualizzarli correttamente.
|
||||
|
||||
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`.
|
||||
Un `circle` in SVG ha tre attributi principali. Gli attributi `cx` e `cy` sono le coordinate. Essi dicono a D3 dove posizionare il *centro* della forma sulla tela SVG. Il raggio (attributo`r`) dà la dimensione del `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.
|
||||
Proprio come la coordinata `y` del `rect`, l'attributo `cy` per un `circle` è misurato dalla parte superiore della tela SVG, non dal basso.
|
||||
|
||||
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.
|
||||
Tutti e tre gli attributi possono usare una funzione callback per impostare dinamicamente i loro valori. Ricorda che tutti i metodi concatenati dopo `data(dataset)` vengono eseguiti una volta per ogni elemento del `dataset`. Il parametro `d` nella funzione callback si riferisce all'elemento corrente del `dataset`, che è un array per ogni punto. Si utilizza la notazione parentesi, come `d[0]`, per accedere ai valori in quell'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.
|
||||
Aggiungi gli attributi `cx`, `cy`e `r` agli elementi `circle`. Il valore `cx` dovrebbe essere il primo numero nell'array per ogni elemento del `dataset`. Il valore `cy` dovrebbe essere basato sul secondo numero nell'array, ma assicurati di mostrare il grafico a destra e non invertito. Il valore `r` dovrebbe essere `5` per tutti i cerchi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `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`.
|
||||
Il primo elemento `circle` dovrebbe avere un valore `cx` di `34`, un valore `cy` di `422`, e un valore `r` di `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`.
|
||||
Il secondo elemento `circle` dovrebbe avere un valore `cx` di `109`, un valore `cy` di `220`, e un valore `r` di `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`.
|
||||
Il terzo elemento `circle` dovrebbe avere un valore `cx` di `310`, un valore `cy` di `380`, e un valore `r` di `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`.
|
||||
Il quarto elemento `circle` dovrebbe avere un valore `cx` di `79`, un valore `cy` di `89`, e un valore `r` di `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`.
|
||||
Il quinto elemento `circle` dovrebbe avere un valore `cx` di `420`, un valore `cy` di `280`, e un valore `r` di `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`.
|
||||
Il sesto elemento `circle` dovrebbe avere un valore `cx` di `233`, un valore `cy` di `355`, e un valore `r` di `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`.
|
||||
Il settimo elemento `circle` dovrebbe avere un valore `cx` di `333`, un valore `cy` di `404`, e un valore `r` di `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`.
|
||||
L'ottavo elemento `circle` dovrebbe avere un valore `cx` di `222`, un valore `cy` di `167`, e un valore `r` di `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`.
|
||||
Il nono elemento `circle` dovrebbe avere un valore `cx` di `78`, un valore `cy` di `180`, e un valore `r` di `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`.
|
||||
Il decimo elemento `circle` dovrebbe avere un valore `cx` di `21`, un valore `cy` di `377`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: Aggiungere gli assi a una visualizzazione
|
||||
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.
|
||||
Un altro modo per migliorare il grafico a dispersione è quello di aggiungere un asse x e un asse 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:
|
||||
D3 ha due metodi, `axisLeft()` e `axisBottom()`, per tracciare rispettivamente l'asse Y e l'asse x. Ecco un esempio per creare l'asse x basato sulla `xScale` delle sfide precedenti:
|
||||
|
||||
```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:
|
||||
Il passo successivo è quello di disegnare l'asse sulla tela SVG. Per farlo, è possibile utilizzare un componente SVG generale, l'elemento `g`. La `g` sta per gruppo. A differenza di `rect`, `circle`, e `text`, un asse è solo una linea retta quando è disegnato. Poiché è una forma semplice, usare `g` funziona. L'ultimo passo è quello di applicare un attributo `transform` per posizionare l'asse sulla tela SVG nel posto giusto. In caso contrario, la linea verrebbe disegnata lungo il bordo della tela SVG e non sarebbe visibile. SVG supporta diversi tipi di trasformazioni (`transforms`), ma il posizionamento di un asse necessita di traslare (`translate`). Quando viene applicato all'elemento `g`, esso sposta l'intero gruppo sopra e verso il basso in base alle quantità indicate. Ecco un esempio:
|
||||
|
||||
```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.
|
||||
Il codice sopra posiziona l'asse X nella parte inferiore della superficie di disegno SVG. Quindi è passato come argomento al metodo `call()`. L'asse y funziona allo stesso modo, a parte il fatto che l'argomento `translate` è nella forma `(x, 0)`. Poiché `translate` è una stringa nel metodo `attr()` scritto sopra, puoi usare la concatenazione per includere valori variabili nei suoi argomenti.
|
||||
|
||||
# --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.
|
||||
Il grafico di dispersione ora ha un asse x. Crea un asse Y in una variabile chiamata `yAxis` utilizzando il metodo `axisLeft()`. Quindi disegna l'asse usando un elemento `g`. Assicurati di utilizzare un attributo `transform` per traslare l'asse verso destra di un numero di unità pari al padding, e di `0` unità verso il basso. Ricordati di richiamare l'asse con `call()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
Il tuo codice dovrebbe usare il metodo `axisLeft()` con `yScale` passato come argomento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
|
||||
L'elemento y-axis di `g` dovrebbe avere un attributo `transform` per traslare l'asse di `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
Il tuo codice dovrebbe chiamare `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
@ -181,9 +181,9 @@ assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
|
||||
Reference in New Issue
Block a user