chore(i18n,curriculum): update translations (#42742)
This commit is contained in:
camperbot
GitHub
@ -26,7 +26,7 @@ Cambia la funzione callback per l'attributo `y` per raddrizzare le barre. Ricord
|
||||
|
||||
# --hints--
|
||||
|
||||
Il primo `rect` dovrebbe avere `y` di `64`.
|
||||
Il primo `rect` dovrebbe avere un valore `y` di `64`.
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
title: Aggiornare dinamicamente l'altezza di un elemento
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
@ -8,13 +8,13 @@ dashedName: update-the-height-of-an-element-dynamically
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:
|
||||
Le sfide precedenti hanno spiegato come visualizzare i dati presi da un array e come aggiungere classi CSS. Puoi combinare queste lezioni per creare un semplice grafico a barre. Puoi farlo in due passaggi:
|
||||
|
||||
1) Create a `div` for each data point in the array
|
||||
1) Creare un `div` per ogni data point nell'array
|
||||
|
||||
2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value
|
||||
2) Dare ad ogni `div` un'altezza dinamica, usanto una funzione callback nel metodo `style()` che imposta un'altezza pari al valore del dato
|
||||
|
||||
Recall the format to set a style using a callback function:
|
||||
Ricordati il formato per impostare uno stile usando una funzione callback:
|
||||
|
||||
```js
|
||||
selection.style("cssProperty", (d) => d)
|
||||
@ -22,59 +22,59 @@ selection.style("cssProperty", (d) => d)
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it.
|
||||
Aggiungi il metodo `style()` al codice nell'editor per impostare la proprietà `height` per ogni elemento. Usa una funzione callback per restituire il valore del data point con la stringa `px` aggiunta ad esso.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `div` should have a `height` of `12` pixels.
|
||||
Il primo `div` dovrebbe avere un'`height` di `12` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(0)[0].style.height === '12px');
|
||||
```
|
||||
|
||||
The second `div` should have a `height` of `31` pixels.
|
||||
Il secondo `div` dovrebbe avere un'`height` di `31` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(1)[0].style.height === '31px');
|
||||
```
|
||||
|
||||
The third `div` should have a `height` of `22` pixels.
|
||||
Il terzo `div` dovrebbe avere un'`height` di `22` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(2)[0].style.height === '22px');
|
||||
```
|
||||
|
||||
The fourth `div` should have a `height` of `17` pixels.
|
||||
Il quarto `div` dovrebbe avere un'`height` di `17` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(3)[0].style.height === '17px');
|
||||
```
|
||||
|
||||
The fifth `div` should have a `height` of `25` pixels.
|
||||
Il quinto `div` dovrebbe avere un'`height` di `25` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(4)[0].style.height === '25px');
|
||||
```
|
||||
|
||||
The sixth `div` should have a `height` of `18` pixels.
|
||||
Il sesto `div` dovrebbe avere un'`height` di `18` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(5)[0].style.height === '18px');
|
||||
```
|
||||
|
||||
The seventh `div` should have a `height` of `29` pixels.
|
||||
Il settimo `div` dovrebbe avere un'`height` di `29` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(6)[0].style.height === '29px');
|
||||
```
|
||||
|
||||
The eighth `div` should have a `height` of `14` pixels.
|
||||
L'ottavo `div` dovrebbe avere un'`height` di `14` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(7)[0].style.height === '14px');
|
||||
```
|
||||
|
||||
The ninth `div` should have a `height` of `9` pixels.
|
||||
Il nono `div` dovrebbe avere un'`height` di `9` pixel.
|
||||
|
||||
```js
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
title: Usare scale dinamiche
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
@ -8,13 +8,13 @@ dashedName: use-dynamic-scales
|
||||
|
||||
# --description--
|
||||
|
||||
The D3 `min()` and `max()` methods are useful to help set the scale.
|
||||
I metodi D3 `min()` e `max()` sono utili per impostare la scala.
|
||||
|
||||
Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
|
||||
Dato un insieme di dati complesso, una priorità è quella di impostare la scala in modo che la visualizzazione si adatti alla larghezza e all'altezza del contenitore SVG. Vogliamo che tutti i dati siano tracciati all'interno della tela SVG in modo da essere visibili sulla pagina web.
|
||||
|
||||
The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization.
|
||||
L'esempio qui sotto imposta la scala dell'asse x per i dati del grafico a dispersione. Il metodo `domain()` passa le informazioni alla scala sui valori dei dati grezzi per il grafico. Il metodo `range()` fornisce informazioni sullo spazio effettivo nella pagina web per la visualizzazione.
|
||||
|
||||
In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
|
||||
Nell'esempio, il dominio va da 0 al massimo nel set di dati. Usa il metodo `max()` con una funzione di callback basata sui valori x negli array. L'intervallo utilizza la larghezza della tela SVG (`w`), ma include anche un po' di padding. Questo mette dello spazio tra i punti della del grafico a dispersione e il bordo della tela SVG.
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
@ -38,29 +38,29 @@ const xScale = d3.scaleLinear()
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
|
||||
Il padding inizialmente può confondere. Immagine l'asse X come una linea orizzontale che va da 0 a 500 (il valore di larghezza della tela SVG). Includendo il padding nel metodo `range()` costringiamo il grafico a partire da 30 lungo quella linea (invece che da 0), e terminare a 470 (invece che a 500).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding.
|
||||
Usa la variabile `yScale` per creare una scala lineare per l'asse y. Il dominio dovrebbe iniziare da zero e andare al valore massimo di `y` nel set. L'intervallo dovrebbe usare l'altezza SVG (`h`) e includere il padding.
|
||||
|
||||
**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
|
||||
**Nota:** Ricordati di mantenere il grafico nel verso giusto. Quando si imposta l'intervallo per le coordinate y, il valore più alto (altezza meno padding) è il primo argomento, e il valore più basso è il secondo argomento.
|
||||
|
||||
# --hints--
|
||||
|
||||
The text in the `h2` should be `30`.
|
||||
Il testo di `h2` dovrebbe essere `30`.
|
||||
|
||||
```js
|
||||
assert(output == 30 && $('h2').text() == '30');
|
||||
```
|
||||
|
||||
The `domain()` of yScale should be equivalent to `[0, 411]`.
|
||||
Il `domain()` di yScale dovrebbe essere equivalente a `[0, 411]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
```
|
||||
|
||||
The `range()` of yScale should be equivalent to `[470, 30]`.
|
||||
Il `range()` di yScale dovrebbe essere equivalente a `[470, 30]`.
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
title: Lavorare con i dati dinamici in D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
@ -8,75 +8,75 @@ dashedName: work-with-dynamic-data-in-d3
|
||||
|
||||
# --description--
|
||||
|
||||
The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
|
||||
Le ultime due sfide riguardano le basi della visualizzazione dinamica dei dati con D3 tramite l'utilizzo dei metodi `data()` e `enter()`. Questi metodi prendono un set di dati e, insieme al metodo `append()`, creano un nuovo elemento DOM per ogni voce nel set di dati.
|
||||
|
||||
In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, `New Title`. This is because you have not made use of the data that is bound to each of the `h2` elements.
|
||||
Nella sfida precedente, hai creato un nuovo elemento `h2` per ogni elemento nell'array `dataset`, ma tutti contenevano lo stesso testo, `New Title`. Questo perché non hai fatto uso dei dati che sono legati a ciascuno degli elementi `h2`.
|
||||
|
||||
The D3 `text()` method can take a string or a callback function as an argument:
|
||||
Il metodo D3 `text()` può prendere una stringa o una funzione di callback come argomento:
|
||||
|
||||
```js
|
||||
selection.text((d) => d)
|
||||
```
|
||||
|
||||
In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
|
||||
Nell'esempio precedente, il parametro `d` si riferisce a una singola voce nel set di dati a cui è associata una selezione.
|
||||
|
||||
Using the current example as context, the first `h2` element is bound to 12, the second `h2` element is bound to 31, the third `h2` element is bound to 22, and so on.
|
||||
Utilizzando l'esempio attuale come contesto, il primo elemento `h2` è legato a 12, il secondo elemento `h2` è legato a 31, il terzo elemento `h2` è legato a 22, e così via.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and the string `USD`. For example, the first heading should be `12 USD`.
|
||||
Modifica il metodo `text()` in modo che ogni elemento `h2` mostri il valore corrispondente dall'array `dataset` con uno spazio e la stringa `USD`. Ad esempio, la prima intestazione dovrebbe essere `12 USD`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `h2` should have the text `12 USD`.
|
||||
Il primo `h2` dovrebbe avere il testo `12 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).text() == '12 USD');
|
||||
```
|
||||
|
||||
The second `h2` should have the text `31 USD`.
|
||||
Il secondo `h2` dovrebbe avere il testo `31 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).text() == '31 USD');
|
||||
```
|
||||
|
||||
The third `h2` should have the text `22 USD`.
|
||||
Il terzo `h2` dovrebbe avere il testo `22 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).text() == '22 USD');
|
||||
```
|
||||
|
||||
The fourth `h2` should have the text `17 USD`.
|
||||
Il quarto `h2` dovrebbe avere il testo `17 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).text() == '17 USD');
|
||||
```
|
||||
|
||||
The fifth `h2` should have the text `25 USD`.
|
||||
Il quinto `h2` dovrebbe avere il testo `25 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).text() == '25 USD');
|
||||
```
|
||||
|
||||
The sixth `h2` should have the text `18 USD`.
|
||||
Il sesto `h2` dovrebbe avere il testo `18 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).text() == '18 USD');
|
||||
```
|
||||
|
||||
The seventh `h2` should have the text `29 USD`.
|
||||
Il settimo `h2` dovrebbe avere il testo `29 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).text() == '29 USD');
|
||||
```
|
||||
|
||||
The eighth `h2` should have the text `14 USD`.
|
||||
L'ottavo `h2` dovrebbe avere il testo `14 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).text() == '14 USD');
|
||||
```
|
||||
|
||||
The ninth `h2` should have the text `9 USD`.
|
||||
Il nono `h2` dovrebbe avere il testo `9 USD`.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
|
||||
Reference in New Issue
Block a user