2018-09-30 22:01:58 +00:00
---
id: 587d7faa367417b2b2512bd3
title: Style D3 Labels
challengeType: 6
---
## Description
< section id = 'description' >
D3 methods can add styles to the bar labels. The < code > fill< / code > attribute sets the color of the text for a < code > text< / code > node. The < code > style()< / code > method sets CSS rules for other styles, such as "font-family" or "font-size".
< / section >
## Instructions
< section id = 'instructions' >
Set the < code > font-size< / code > of the < code > text< / code > elements to 25px, and the color of the text to red.
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 13:37:37 +00:00
tests:
- text: The labels should all have a < code > fill</ code > color of red.
2018-10-20 18:02:47 +00:00
testString: assert($('text').css('fill') == 'rgb(255, 0, 0)', 'The labels should all have a < code > fill< / code > color of red.');
2018-10-04 13:37:37 +00:00
- text: The labels should all have a < code > font-size</ code > of 25 pixels.
2018-10-20 18:02:47 +00:00
testString: assert($('text').css('font-size') == '25px', 'The labels should all have a < code > font-size< / code > of 25 pixels.');
2018-09-30 22:01:58 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
const w = 500;
const h = 100;
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy");
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (3 * d) - 3)
// Add your code below this line
2018-10-08 00:01:53 +00:00
2018-09-30 22:01:58 +00:00
// Add your code above this line
< / script >
< / body >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
// solution required
```
< / section >
