124 lines
3.8 KiB
Markdown
124 lines
3.8 KiB
Markdown
|
---
|
|||
|
|
id: 587d7fa7367417b2b2512bc7
|
|||
|
|
title: Зміна стилів на основі даних
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301479
|
|||
|
|
dashedName: change-styles-based-on-data
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Про візуалізацію та подання даних можна дізнатися за допомогою D3. Ймовірно, що на основі даних ви захочете змінити стиль елементів. Для того, щоб змінити стиль для різних елементів, ви можете використати функцію зворотного зв'язку в методі `style()`.
|
|||
|
|
|
|||
|
|
Наприклад, ви можливо маєте бажання зафарбувати точку даних у синій колір, якщо її значення менше ніж 20, в іншому випадку - у червоний. Ви можете використати функцію зворотного зв'язку в методі `style()` і включити умовну логіку. Для відображення точки даних, функція зворотного зв'язку використовує параметр `d`:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
selection.style("color", (d) => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
При використанні методу `style()` він не обмежується лише встановленням `color`, адже він може добре використовуватися і з іншими властивостями CSS.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Щоб встановити `color` елементів `h2` умовно, потрібно додати метод `style()` до коду в редакторі. Запишіть функцію зворотного зв'язку, щоб вона повертала червоний колір, якщо значення менше 20, в іншому випадку - зелений.
|
|||
|
|
|
|||
|
|
**Note:** Ви можете використовувати if-else логіку або тернарний оператор.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Перший `h2` повинен мати червоний `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Другий `h2` повинен мати зелений `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Третій `h2` повинен мати зелений `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Четвертий `h2` повинен мати червоний `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
П'ятий `h2` повинен мати зелений `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Шостий `h2` повинен мати червоний `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Сьомий `h2` повинен мати зелений `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Восьмий `h2` повинен мати червоний `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Дев'ятий `h2` повинен мати червоний `color`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
|||
|
|
|
|||
|
|
d3.select("body").selectAll("h2")
|
|||
|
|
.data(dataset)
|
|||
|
|
.enter()
|
|||
|
|
.append("h2")
|
|||
|
|
.text((d) => (d + " USD"))
|
|||
|
|
// Add your code below this line
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
|||
|
|
|
|||
|
|
d3.select("body").selectAll("h2")
|
|||
|
|
.data(dataset)
|
|||
|
|
.enter()
|
|||
|
|
.append("h2")
|
|||
|
|
.text((d) => (d + " USD"))
|
|||
|
|
.style("color", (d) => d < 20 ? "red" : "green")
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|