freeCodeCamp

3.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa8367417b2b2512bcb	Learn About SVG in D3	6		Узнайте о SVG в D3

Description

SVG означает 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

3.8 KiB Raw Blame History Unescape Escape