3.9 KiB
3.9 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa8367417b2b2512bcb | Learn About SVG in D3 |
|
6 | Узнайте о SVG в D3 |
Description
Scalable Vector Graphics
. Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны svg
теге HTML svg
. CSS может быть масштабируемым, когда стили используют относительные единицы (например, vh
, vw
или проценты), но использование SVG более гибко для создания визуализации данных. Instructions
svg
в body
используя append()
. Дайте ему атрибут width
установленный для предоставленного w
константы, и атрибут height
установленный для предоставленной постоянной h
используя метод attr()
для каждого. Вы увидите его на выходе, потому что в теге style
используется background-color
розового background-color
. Заметка Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования.
Tests
tests:
- text: В вашем документе должен быть 1 элемент <code>svg</code> .
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
- text: Элемент <code>svg</code> должен иметь атрибут <code>width</code> равный 500.
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
- text: Элемент <code>svg</code> должен иметь атрибут <code>height</code> равный 100.
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
Challenge Seed
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
// Add your code above this line
</script>
</body>
Solution
// solution required