2021-06-15 00:49:18 -07:00
---
id: 587d7fa7367417b2b2512bc8
2021-07-03 20:07:10 +05:30
title: Aggiungere classi con D3
2021-06-15 00:49:18 -07:00
challengeType: 6
forumTopicId: 301473
dashedName: add-classes-with-d3
---
# --description--
2021-07-03 20:07:10 +05:30
Utilizzare un sacco di stili in linea su elementi HTML diventa difficile da gestire, anche per le applicazioni più piccole. È più facile aggiungere una classe agli elementi e stilizzare quella classe una sola volta usando le regole CSS. D3 ha il metodo `attr()` per aggiungere qualsiasi attributo HTML a un elemento, incluso un nome di classe.
2021-06-15 00:49:18 -07:00
2021-07-03 20:07:10 +05:30
Il metodo `attr()` funziona nello stesso modo di `style()` . Esso prende valori separati da virgola, e può usare una funzione di callback. Ecco un esempio per aggiungere una classe `container` a una selezione:
2021-06-15 00:49:18 -07:00
```js
selection.attr("class", "container");
```
2021-07-03 20:07:10 +05:30
Nota che il parametro `class` rimarrà lo stesso ogni volta che dovrai aggiungere una classe e solo il parametro `container` cambierà.
2021-06-15 00:49:18 -07:00
# --instructions--
2021-07-03 20:07:10 +05:30
Aggiungi il metodo `attr()` al codice nell'editor e applica una classe `bar` agli elementi `div` .
2021-06-15 00:49:18 -07:00
# --hints--
2021-07-03 20:07:10 +05:30
I tuoi elementi `div` dovrebbero avere una classe di `bar` .
2021-06-15 00:49:18 -07:00
```js
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
```
2021-07-03 20:07:10 +05:30
Il tuo codice dovrebbe usare il metodo `attr()` .
2021-06-15 00:49:18 -07:00
```js
assert(code.match(/\.attr/g));
```
# --seed--
## --seed-contents--
```html
< style >
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
< / style >
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// Add your code below this line
// Add your code above this line
< / script >
< / body >
```
# --solutions--
```html
< style >
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
< / style >
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// Add your code below this line
.attr("class","bar");
// Add your code above this line
< / script >
< / body >
```
