2021-06-15 00:49:18 -07:00
---
id: 587d7fa7367417b2b2512bc8
2021-07-26 03:17:00 +09:00
title: Adicionar classes com o D3
2021-06-15 00:49:18 -07:00
challengeType: 6
forumTopicId: 301473
dashedName: add-classes-with-d3
---
# --description--
2021-07-26 03:17:00 +09:00
É 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.
2021-06-15 00:49:18 -07:00
2021-07-26 03:17:00 +09:00
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:
2021-06-15 00:49:18 -07:00
```js
selection.attr("class", "container");
```
2021-07-26 03:17:00 +09:00
Observe que o parâmetro `class` permanecerá o mesmo sempre que você precisar adicionar uma classe e que somente o parâmetro `container` mudará.
2021-06-15 00:49:18 -07:00
# --instructions--
2021-07-26 03:17:00 +09:00
Adicione o método `attr()` ao código no editor e coloque uma classe `bar` nos elementos `div` .
2021-06-15 00:49:18 -07:00
# --hints--
2021-07-26 03:17:00 +09:00
Os elementos `div` devem ter a classe `bar` .
2021-06-15 00:49:18 -07:00
```js
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
```
2021-07-26 03:17:00 +09:00
O código deve usar o método `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 >
```
