125 lines
3.4 KiB
Markdown
125 lines
3.4 KiB
Markdown
---
|
|
id: 5d8a4cfbe6b6180ed9a1c9f0
|
|
title: Part 19
|
|
challengeType: 0
|
|
dashedName: part-19
|
|
---
|
|
|
|
# --description--
|
|
|
|
You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection.
|
|
|
|
`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection:
|
|
|
|
```js
|
|
const variableName = d3.select('element')
|
|
.append('element')
|
|
.attr('attribute', 'value')
|
|
```
|
|
|
|
Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations.
|
|
|
|
# --hints--
|
|
|
|
test-text
|
|
|
|
```js
|
|
assert($('svg')[0].attributes.width.value === '700');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --before-user-code--
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>D3 Dashboard</title>
|
|
<style>
|
|
body {
|
|
background-color: #ccc;
|
|
padding: 100px 10px;
|
|
}
|
|
|
|
.dashboard {
|
|
width: 980px;
|
|
height: 500px;
|
|
background-color: white;
|
|
box-shadow: 5px 5px 5px 5px #888;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="dashboard"></div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<script>
|
|
const data = [
|
|
{ year: 2012, followers: { twitter: 2594, tumblr: 401, instagram: 83 }},
|
|
{ year: 2013, followers: { twitter: 3049, tumblr: 440, instagram: 192 }},
|
|
{ year: 2014, followers: { twitter: 3511, tumblr: 415, instagram: 511 }},
|
|
{ year: 2015, followers: { twitter: 3619, tumblr: 492, instagram: 1014 }},
|
|
{ year: 2016, followers: { twitter: 4046, tumblr: 543, instagram: 2066 }},
|
|
{ year: 2017, followers: { twitter: 3991, tumblr: 701, instagram: 3032 }},
|
|
{ year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
|
|
{ year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
|
|
{ year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
|
|
];
|
|
</script>
|
|
<script>
|
|
const svgMargin = 70,
|
|
svgWidth = 700,
|
|
svgHeight = 500,
|
|
twitterColor = '#7cd9d1',
|
|
tumblrColor = '#f6dd71',
|
|
instagramColor = '#fd9b98';
|
|
|
|
const lineGraph = d3.select('.dashboard')
|
|
.append('svg')
|
|
|
|
|
|
</script>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<script>
|
|
const data = [
|
|
{ year: 2012, followers: { twitter: 2594, tumblr: 401, instagram: 83 }},
|
|
{ year: 2013, followers: { twitter: 3049, tumblr: 440, instagram: 192 }},
|
|
{ year: 2014, followers: { twitter: 3511, tumblr: 415, instagram: 511 }},
|
|
{ year: 2015, followers: { twitter: 3619, tumblr: 492, instagram: 1014 }},
|
|
{ year: 2016, followers: { twitter: 4046, tumblr: 543, instagram: 2066 }},
|
|
{ year: 2017, followers: { twitter: 3991, tumblr: 701, instagram: 3032 }},
|
|
{ year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
|
|
{ year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
|
|
{ year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
|
|
];
|
|
</script>
|
|
<script>
|
|
const svgMargin = 70,
|
|
svgWidth = 700,
|
|
svgHeight = 500,
|
|
twitterColor = '#7cd9d1',
|
|
tumblrColor = '#f6dd71',
|
|
instagramColor = '#fd9b98';
|
|
|
|
const lineGraph = d3.select('.dashboard')
|
|
.append('svg')
|
|
.attr('width', svgWidth)
|
|
|
|
|
|
</script>
|
|
```
|