5.1 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fa9367417b2b2512bd0 | Інвертування SVG елементів | 6 | 301488 | invert-svg-elements |
--description--
Можливо, Ви помітили, що стовпчикова діаграма виглядає ніби перевернута або інвертована. Це пов'язано зі способом використання (x, y) координат у SVG.
Початком координат у SVG виступає точка, розташована у верхньому лівому куті. Вісь 0 x розміщує фігуру у лівій частині площини SVG. Вісь 0 y розміщує фігуру у верхній частині площини SVG. Чим вище значення осі x, тим більше прямокутник зсувається вправо. Чим вище значення осі y, тим більше прямокутник опускається вниз.
Щоб розмістити стовпчик праворуч зверху, необхідно змінити обчислення y координати. Треба враховувати як висоту стовпчика, так і загальну висоту SVG площини.
Висота площини SVG дорівнює 100. Припустимо, що у Вас задана точка 0, а Ви хотіли б, щоб стовпчик починався у нижній частині площини SVG (не зверху). Для цього, значення y координати має бути 100. Якби значення точки було 1, тоді, щоб задати стовпчик знизу, ми б брали за початкове значення y координати 100. Враховуємо висоту стовпчика 1, в такому випадку значення осі y становитиме 99.
Застосовуючи цю формулу y = heightOfSVG - heightOfBar для обчислення значення y координати, розміщуємо стовпчики у правій верхній частині площини.
--instructions--
Змініть функцію зворотного відліку для атрибуту y, щоб встановити стовпчики праворуч зверху. Пам'ятайте, що height стовпчика у 3 рази перевищує значення d.
Примітка: Співвідношення має такий вигляд: y = h - m * d, де m константа, яка масштабує значення точок.
--hints--
Перший rect повинен мати значення y 64.
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
Другий rect повинен мати значення y 7.
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
Третій rect повинен мати значення y 34.
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
Четвертий rect повинен мати значення y 49.
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
П'ятий rect повинен мати значення y 25.
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
Шостий rect повинен мати значення y 46.
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
Сьомий rect повинен мати значення y 13.
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
Восьмий rect повинен мати значення y 58.
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
Дев'ятий rect повинен мати значення y 73.
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
--seed--
--seed-contents--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
--solutions--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
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) => 3 * d);
</script>
</body>