chore(i18n,curriculum): processed translations (#42721)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
title: Visualizzare i dati con un grafico a barre
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
**Obiettivo:** Costruisci un'app su [CodePen.io](https://codepen.io) che sia funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai in modo che tutti i test passino. Dagli il tuo stile personale.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puoi usare HTML, JavaScript, CSS e la libreria di visualizzazione basata su svg D3. I test richiedono la generazione degli assi con la proprietà axis di D3, che crea automaticamente le tacche sugli assi. Queste tacche sono richieste per superare i test perché la loro posizione è usata per determinale l'allineamento degli elementi del grafico. Puoi trovare informazioni su come generare gli assi su <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Gli elementi del DOM (non-virtuale) richiesti sono selezionati al momento di ogni test. Se usi un framework frontend (come Vue per esempio) i risultati dei test potrebbero essere inaccurati per il contenuto dinamico. Speriamo di supportarli prima o poi, ma al momento non lo sono per i progetti D3.
|
||||
|
||||
**User Story #1:** My chart should have a title with a corresponding `id="title"`.
|
||||
**User Story #1:** Il mio grafico dovrebbe avere un titolo con corrispondente `id="title"`.
|
||||
|
||||
**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`.
|
||||
**User Story #2:** Il mio grafico dovrebbe avere un elemento x-axis `g` con un corrispondente `id="x-axis"`.
|
||||
|
||||
**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
|
||||
**User Story #3:** Il mio grafico dovrebbe avere un elemento y-axis `g` con un corrispondente `id="y-axis"`.
|
||||
|
||||
**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`.
|
||||
**User Story #4:** I due assi dovrebbero avere etichette multiple per le tacche ognuna con una corrispondente `class="tick"`.
|
||||
|
||||
**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
|
||||
**User Story #5:** Il mio grafico dovrebbe avere un elemento `rect` che mostra i dati di ogni data point con una corrispondente `class="bar"`.
|
||||
|
||||
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
|
||||
**User Story #6:** Ogni bar dovrebbe avere le proprietà `data-date` e `data-gdp` contenenti i valori `date` e `GDP`.
|
||||
|
||||
**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
|
||||
**User Story #7:** Le proprietà `data-date` degli elementi bar dovrebbero corrispondere all'ordine dei dati messi a disposizione.
|
||||
|
||||
**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
|
||||
**User Story #8:** Le proprietà `data-gdp` degli elementi bar dovrebbero corrispondere all'ordine dei dati messi a disposizione.
|
||||
|
||||
**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`.
|
||||
**User Story #9:** L'altezza di ogni barra dovrebbe rappresentare accuratamente il corrispondente dato `GDP`.
|
||||
|
||||
**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.
|
||||
**User Story #10:** L'attributo `data-date` e il suo corrispondente elemento bar dovrebbero allinearsi con il corrispondente valore dell'asse x.
|
||||
|
||||
**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis.
|
||||
**User Story #11:** L'attributo `data-gdp` e il suo corrispondente elemento bar dovrebbero allinerasi con il corrispondente valore dell'asse y.
|
||||
|
||||
**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**User Story #12:** Posso passare con il mouse su un'area e vedere un tooltip con un corrispondente `id="tooltip"` che mostra maggiori informazioni sull'area.
|
||||
|
||||
**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area.
|
||||
**User Story #13:** Il mio tooltip dovrebbe avere una proprietà `data-date` che corrisponde al `data-date` dell'area attiva.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
Ecco i dati che dovrai utilizzare per completare il progetto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: Visualizzare i dati con una mappa coropletica
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai in modo che tutti i test siano superati. Dalle il tuo stile personale.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Puoi usare HTML, JavaScript, CSS e la libreria di visualizzazione basata su svg D3. Gli elementi del DOM (non-virtuale) richiesti sono selezionati al momento di ogni test. Se usi un framework frontend (come Vue per esempio) i risultati dei test potrebbero essere inaccurati per il contenuto dinamico. Speriamo di supportarli prima o poi, ma questi framework non sono supportati al momento per i progetti D3.
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**User Story #1:** La mia mappa coropletica dovrebbe avere un titolo con corrispondente `id="title"`.
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**User Story #2:** La mia mappa coropletica dovrebbe avere un elemento descrittivo con un corrispondente `id="description"`.
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**User Story #3:** La mia mappa coropletica dovrebbe avere le contee con una classe `class="county"` corrispondente.
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**User Story #4:** Dovrebbero essere usati almeno 4 colori di riempimento diversi per le contee.
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
|
||||
**User Story #5:** Le mie contee dovrebbero avere le proprietà `data-fips` e `data-education` contenenti i loro valori corrispondenti `fips` e `education`.
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
**User Story #6:** La mia mappa coropletica dovrebbe avere una contea per ogni data point fornito.
|
||||
|
||||
**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
|
||||
**User Story #7:** Le contee dovrebbero avere valori `data-fips` e `data-education` che corrispondono ai dati del campione.
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**User Story #8:** La mia mappa coropletica dovrebbe avere una legenda con corrispondente `id="legend"`.
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**User Story #9:** Dovrebbero essere usati almeno 4 colori di riempimento diversi per la legenda.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**User Story #10:** Posso passare con il mouse su un'area e vedere un suggerimento con un corrispondente `id="tooltip"` che mostra maggiori informazioni sull'area.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**User Story #11:** Il mio suggerimento dovrebbe avere una proprietà `data-education` che corrisponde alla `data-education` dell'area attiva.
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
Ecco i set di dati necessari per completare questo progetto:
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **Dati sull'educazione negli Stati Uniti:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Dati sull'educazione nelle contee degli Stati Uniti:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo click su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
title: Aggiungere elementi a un documento con D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
@ -8,23 +8,23 @@ dashedName: add-document-elements-with-d3
|
||||
|
||||
# --description--
|
||||
|
||||
D3 has several methods that let you add and change elements in your document.
|
||||
D3 ha diversi metodi che consentono di aggiungere e modificare elementi nel documento.
|
||||
|
||||
The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
|
||||
Il metodo `select()` seleziona un elemento del documento. Esso richiede un argomento per il nome dell'elemento che si desidera e restituisce un nodo HTML per il primo elemento del documento che corrisponde a quel nome. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const anchor = d3.select("a");
|
||||
```
|
||||
|
||||
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
|
||||
L'esempio precedente trova il primo tag di ancoraggio sulla pagina e salva un nodo HTML nella variabile `anchor`. È possibile utilizzare la selezione con altri metodi. La parte `d3` dell'esempio è un riferimento all'oggetto D3, che è il modo usato per accedere ai metodi D3.
|
||||
|
||||
Two other useful methods are `append()` and `text()`.
|
||||
Altri due metodi utili sono `append()` e `text()`.
|
||||
|
||||
The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.
|
||||
Il metodo `append()` richiede un argomento per l'elemento che si desidera aggiungere al documento. Esso aggiunge un nodo HTML a un elemento selezionato e restituisce un handle (un appiglio) a quel nodo.
|
||||
|
||||
The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.
|
||||
Il metodo `text()` imposta il testo del nodo selezionato, o ottiene il testo corrente. Per impostare il valore, si passa una stringa come argomento all'interno delle parentesi del metodo.
|
||||
|
||||
Here's an example that selects an unordered list, appends a list item, and adds text:
|
||||
Ecco un esempio che seleziona una lista non ordinata, aggiunge un elemento alla lista e aggiunge del testo:
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
@ -32,45 +32,45 @@ d3.select("ul")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
D3 allows you to chain several methods together with periods to perform a number of actions in a row.
|
||||
D3 consente di concatenare diversi metodi tra loro con dei punti per eseguire un certo numero di azioni in una stessa riga.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element.
|
||||
Usa il metodo `select` per selezionare il tag `body` nel documento. Quindi aggiungi ad esso (`append`) un tag `h1` e aggiungi il testo `Learning D3` nell'elemento `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `body` should have one `h1` element.
|
||||
Il `body` dovrebbe avere un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
The `h1` element should have the text `Learning D3` in it.
|
||||
L'elemento `h1` dovrebbe contenere il testo `Learning D3`.
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
Your code should access the `d3` object.
|
||||
Il tuo codice dovrebbe accedere all'oggetto `d3`.
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
Your code should use the `select` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `select`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
Your code should use the `append` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `append`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
Your code should use the `text` method.
|
||||
Il tuo codice dovrebbe usare il metodo `text`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Change Styles Based on Data
|
||||
title: Cambiare lo stile in base ai dati
|
||||
challengeType: 6
|
||||
forumTopicId: 301479
|
||||
dashedName: change-styles-based-on-data
|
||||
@ -8,9 +8,9 @@ dashedName: change-styles-based-on-data
|
||||
|
||||
# --description--
|
||||
|
||||
D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements.
|
||||
D3 riguarda la visualizzazione e la presentazione dei dati. È probabile che tu voglia cambiare lo stile degli elementi in base ai dati. È possibile utilizzare una funzione di callback nel metodo `style()` per cambiare lo stile di diversi elementi.
|
||||
|
||||
For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
|
||||
Ad esempio, potresti voler rendere blu un punto dati se ha un valore inferiore a 20, e rosso altrimenti. Puoi usare una funzione di callback nel metodo `style()` e includere la logica condizionale. La funzione callback utilizza il parametro `d` per rappresentare il punto dati:
|
||||
|
||||
```js
|
||||
selection.style("color", (d) => {
|
||||
@ -18,65 +18,65 @@ selection.style("color", (d) => {
|
||||
});
|
||||
```
|
||||
|
||||
The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
|
||||
Il metodo `style()` non si limita a impostare il `color` - può essere utilizzato anche con altre proprietà CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.
|
||||
Aggiungi il metodo `style()` al codice nell'editor per impostare il `color` dell'elemento `h2` con la logica condizionale. Scrivi la funzione di callback in modo tale che se il valore dei dati è inferiore a 20, restituisca rosso, altrimenti restituisca verde.
|
||||
|
||||
**Note:** You can use if-else logic, or the ternary operator.
|
||||
**Nota:** È possibile utilizzare la logica if-else o l'operatore ternario.
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `h2` should have a `color` of red.
|
||||
Il primo `h2` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The second `h2` should have a `color` of green.
|
||||
Il secondo `h2` dovrebbe avere un `color` verde.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
The third `h2` should have a `color` of green.
|
||||
Il terzo `h2` dovrebbe avere un `color` verde.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
The fourth `h2` should have a `color` of red.
|
||||
Il quarto `h2` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The fifth `h2` should have a `color` of green.
|
||||
Il quinto `h2` dovrebbe avere un `color` verde.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
The sixth `h2` should have a `color` of red.
|
||||
Il sesto `h2` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The seventh `h2` should have a `color` of green.
|
||||
Il settimo `h2` dovrebbe avere un `color` verde.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
The eighth `h2` should have a `color` of red.
|
||||
L'ottavo `h2` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The ninth `h2` should have a `color` of red.
|
||||
Il nono `h2` dovrebbe avere un `color` rosso.
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
title: Creare un diagramma a dispersione con cerchi SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301484
|
||||
dashedName: create-a-scatterplot-with-svg-circles
|
||||
@ -8,19 +8,19 @@ dashedName: create-a-scatterplot-with-svg-circles
|
||||
|
||||
# --description--
|
||||
|
||||
A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `x` and `y` axes, and are used to position the circle in the visualization.
|
||||
Un grafico a dispersione è un altro tipo di visualizzazione. Di solito usa i cerchi per mappare i punti dati, e ogni cerchio ha bisogno di due valori. Questi valori si legano agli assi `x` e `y`, e vengono utilizzati per posizionare il cerchio nella visualizzazione.
|
||||
|
||||
SVG has a `circle` tag to create the circle shape. It works a lot like the `rect` elements you used for the bar chart.
|
||||
SVG ha un tag `circle` per creare la forma del cerchio. Funziona in modo simile agli elementi `rect` che hai usato per il grafico a barre.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
|
||||
Usa i metodi `data()`, `enter()`, e `append()` per associare il `dataset` ai nuovi elementi `circle` che sono aggiunti alla tela SVG.
|
||||
|
||||
**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
|
||||
**Nota:** I cerchi non saranno visibili perché non abbiamo ancora impostato i loro attributi. Lo faremo nella prossima sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
|
||||
Reference in New Issue
Block a user