fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@@ -2,23 +2,27 @@
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301469
|
||||
localeTitle: Добавить эффект наведения на элемент D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода <code>attr()</code> . Затем псевдокласс класса <code>:hover</code> для вашего нового класса содержит правила стиля для любых эффектов зависания. </section>
|
||||
<section id='description'>
|
||||
Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода <code>attr()</code> . Затем псевдокласс класса <code>:hover</code> для вашего нового класса содержит правила стиля для любых эффектов зависания.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте метод <code>attr()</code> чтобы добавить класс <code>bar</code> ко всем элементам <code>rect</code> . Это изменит цвет <code>fill</code> на коричневый, если вы нажмете на него. </section>
|
||||
<section id='instructions'>
|
||||
Используйте метод <code>attr()</code> чтобы добавить класс <code>bar</code> ко всем элементам <code>rect</code> . Это изменит цвет <code>fill</code> на коричневый, если вы нажмете на него.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваши <code>rect</code> элементы должны иметь класс <code>bar</code> .
|
||||
testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'
|
||||
- text: Your <code>rect</code> elements should have a class of <code>bar</code>.
|
||||
testString: assert($('rect').attr('class') == "bar");
|
||||
|
||||
```
|
||||
|
||||
@@ -77,14 +81,51 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</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")
|
||||
.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)
|
||||
.attr("fill", "navy")
|
||||
// Add your code below this line
|
||||
.attr('class', 'bar')
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,41 +2,45 @@
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301470
|
||||
localeTitle: Добавление всплывающей подсказки к элементу D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент <code>title</code> SVG. <code>title</code> с методом <code>text()</code> для динамического добавления данных в столбцы. </section>
|
||||
<section id='description'>
|
||||
Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент <code>title</code> SVG. <code>title</code> с методом <code>text()</code> для динамического добавления данных в столбцы.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавляйте элемент <code>title</code> под каждым <code>rect</code> узлом. Затем вызовите метод <code>text()</code> с функцией обратного вызова, чтобы текст отображал значение данных. </section>
|
||||
<section id='instructions'>
|
||||
Добавляйте элемент <code>title</code> под каждым <code>rect</code> узлом. Затем вызовите метод <code>text()</code> с функцией обратного вызова, чтобы текст отображал значение данных.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 9 элементов <code>title</code> .
|
||||
testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
|
||||
- text: Первый элемент <code>title</code> должен иметь текст всплывающей подсказки 12.
|
||||
testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
|
||||
- text: ''
|
||||
testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'
|
||||
- text: Your code should have 9 <code>title</code> elements.
|
||||
testString: assert($('title').length == 9);
|
||||
- text: The first <code>title</code> element should have tooltip text of 12.
|
||||
testString: assert($('title').eq(0).text() == '12');
|
||||
- text: The second <code>title</code> element should have tooltip text of 31.
|
||||
testString: assert($('title').eq(1).text() == '31');
|
||||
- text: The third <code>title</code> element should have tooltip text of 22.
|
||||
testString: assert($('title').eq(2).text() == '22');
|
||||
- text: The fourth <code>title</code> element should have tooltip text of 17.
|
||||
testString: assert($('title').eq(3).text() == '17');
|
||||
- text: The fifth <code>title</code> element should have tooltip text of 25.
|
||||
testString: assert($('title').eq(4).text() == '25');
|
||||
- text: The sixth <code>title</code> element should have tooltip text of 18.
|
||||
testString: assert($('title').eq(5).text() == '18');
|
||||
- text: The seventh <code>title</code> element should have tooltip text of 29.
|
||||
testString: assert($('title').eq(6).text() == '29');
|
||||
- text: The eighth <code>title</code> element should have tooltip text of 14.
|
||||
testString: assert($('title').eq(7).text() == '14');
|
||||
- text: The ninth <code>title</code> element should have tooltip text of 9.
|
||||
testString: assert($('title').eq(8).text() == '9');
|
||||
|
||||
```
|
||||
|
||||
@@ -96,14 +100,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,43 +2,47 @@
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301471
|
||||
localeTitle: Добавить атрибуты элементов круга
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала элементы <code>circle</code> для каждой точки <code>dataset</code> и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого <code>circle</code> чтобы отображать их правильно. <code>circle</code> в SVG имеет три основных атрибута. Атрибуты <code>cx</code> и <code>cy</code> - это координаты. Они сообщают D3, где можно расположить <em>центр</em> фигуры на холсте SVG. Радиус (атрибут <code>r</code> ) задает размер <code>circle</code> . Как и <code>rect</code> координата <code>y</code> , атрибут <code>cy</code> для <code>circle</code> измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как <code>data(dataset)</code> запускаются один раз для каждого элемента в <code>dataset</code> . Параметр <code>d</code> в функции обратного вызова относится к текущему элементу в <code>dataset</code> , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например <code>d[0]</code> . </section>
|
||||
<section id='description'>
|
||||
Последняя задача создала элементы <code>circle</code> для каждой точки <code>dataset</code> и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого <code>circle</code> чтобы отображать их правильно. <code>circle</code> в SVG имеет три основных атрибута. Атрибуты <code>cx</code> и <code>cy</code> - это координаты. Они сообщают D3, где можно расположить <em>центр</em> фигуры на холсте SVG. Радиус (атрибут <code>r</code> ) задает размер <code>circle</code> . Как и <code>rect</code> координата <code>y</code> , атрибут <code>cy</code> для <code>circle</code> измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как <code>data(dataset)</code> запускаются один раз для каждого элемента в <code>dataset</code> . Параметр <code>d</code> в функции обратного вызова относится к текущему элементу в <code>dataset</code> , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например <code>d[0]</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте атрибуты <code>cx</code> , <code>cy</code> и <code>r</code> в элементы <code>circle</code> . Значение <code>cx</code> должно быть первым числом в массиве для каждого элемента в <code>dataset</code> . Значение <code>cy</code> должно основываться на втором номере в массиве, но обязательно показывать диаграмму с правой стороны и не инвертировать. Значение <code>r</code> должно быть 5 для всех кругов. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте атрибуты <code>cx</code> , <code>cy</code> и <code>r</code> в элементы <code>circle</code> . Значение <code>cx</code> должно быть первым числом в массиве для каждого элемента в <code>dataset</code> . Значение <code>cy</code> должно основываться на втором номере в массиве, но обязательно показывать диаграмму с правой стороны и не инвертировать. Значение <code>r</code> должно быть 5 для всех кругов.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: 'Первый элемент <code>circle</code> должен иметь значение <code>cx</code> 34, значение <code>cy</code> 422 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.");'
|
||||
- text: 'Второй элемент <code>circle</code> должен иметь значение <code>cx</code> 109, значение <code>cy</code> 220 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.");'
|
||||
- text: 'Третий элемент <code>circle</code> должен иметь значение <code>cx</code> 310, значение <code>cy</code> 380 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент четвертого <code>circle</code> должен иметь значение <code>cx</code> 79, значение <code>cy</code> 89 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент пятого <code>circle</code> должен иметь значение <code>cx</code> 420, значение <code>cy</code> 280 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент шестого <code>circle</code> должен иметь значение <code>cx</code> 233, значение <code>cy</code> 355 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент седьмого <code>circle</code> должен иметь значение <code>cx</code> 333, значение <code>cy</code> 404 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент восьмого <code>circle</code> должен иметь значение <code>cx</code> 222, значение <code>cy</code> 167 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент девятого <code>circle</code> должен иметь значение <code>cx</code> 78, значение <code>cy</code> 180 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.");'
|
||||
- text: 'Элемент десятого <code>circle</code> должен иметь значение <code>cx</code> 21, значение <code>cy</code> 377 и значение <code>r</code> 5.'
|
||||
testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.");'
|
||||
- text: Your code should have 10 <code>circle</code> elements.
|
||||
testString: assert($('circle').length == 10);
|
||||
- text: The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(0).attr('cx') == '34' && $('circle').eq(0).attr('cy') == '422' && $('circle').eq(0).attr('r') == '5');
|
||||
- text: The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(1).attr('cx') == '109' && $('circle').eq(1).attr('cy') == '220' && $('circle').eq(1).attr('r') == '5');
|
||||
- text: The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(2).attr('cx') == '310' && $('circle').eq(2).attr('cy') == '380' && $('circle').eq(2).attr('r') == '5');
|
||||
- text: The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(3).attr('cx') == '79' && $('circle').eq(3).attr('cy') == '89' && $('circle').eq(3).attr('r') == '5');
|
||||
- text: The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(4).attr('cx') == '420' && $('circle').eq(4).attr('cy') == '280' && $('circle').eq(4).attr('r') == '5');
|
||||
- text: The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(5).attr('cx') == '233' && $('circle').eq(5).attr('cy') == '355' && $('circle').eq(5).attr('r') == '5');
|
||||
- text: The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(6).attr('cx') == '333' && $('circle').eq(6).attr('cy') == '404' && $('circle').eq(6).attr('r') == '5');
|
||||
- text: The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(7).attr('cx') == '222' && $('circle').eq(7).attr('cy') == '167' && $('circle').eq(7).attr('r') == '5');
|
||||
- text: The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(8).attr('cx') == '78' && $('circle').eq(8).attr('cy') == '180' && $('circle').eq(8).attr('r') == '5');
|
||||
- text: The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.
|
||||
testString: assert($('circle').eq(9).attr('cx') == '21' && $('circle').eq(9).attr('cy') == '377' && $('circle').eq(9).attr('r') == '5');
|
||||
|
||||
```
|
||||
|
||||
@@ -91,14 +95,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,31 @@
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301472
|
||||
localeTitle: Добавление осей к визуализации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода <code>axisLeft()</code> и <code>axisBottom()</code> для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе <code>xScale</code> в предыдущих задачах: <code>const xAxis = d3.axisBottom(xScale);</code> Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент <code>g</code> . Группа <code>g</code> обозначает группу. В отличие от <code>rect</code> , <code>circle</code> и <code>text</code> , ось является прямой линией, когда она отображается. Потому что это простая форма, используя <code>g</code> works. Последний шаг - применить атрибут <code>transform</code> для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы <code>transforms</code> , но позиционирование оси требует <code>translate</code> . Когда он применяется к элементу <code>g</code> , он перемещает всю группу за и на указанные суммы. Вот пример: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append ( "г") <br> .attr ("transform", "translate (0," + (h - padding) + ")") <br> .call (Xaxis); </blockquote> Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу <code>call()</code> . Ось y работает одинаково, за исключением того, что аргумент <code>translate</code> имеет вид (x, 0). Поскольку <code>translate</code> является строкой в методе <code>attr()</code> выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов. </section>
|
||||
<section id='description'>
|
||||
Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода <code>axisLeft()</code> и <code>axisBottom()</code> для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе <code>xScale</code> в предыдущих задачах: <code>const xAxis = d3.axisBottom(xScale);</code> Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент <code>g</code> . Группа <code>g</code> обозначает группу. В отличие от <code>rect</code> , <code>circle</code> и <code>text</code> , ось является прямой линией, когда она отображается. Потому что это простая форма, используя <code>g</code> works. Последний шаг - применить атрибут <code>transform</code> для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы <code>transforms</code> , но позиционирование оси требует <code>translate</code> . Когда он применяется к элементу <code>g</code> , он перемещает всю группу за и на указанные суммы. Вот пример: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append ( "г") <br> .attr ("transform", "translate (0," + (h - padding) + ")") <br> .call (Xaxis); </blockquote> Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу <code>call()</code> . Ось y работает одинаково, за исключением того, что аргумент <code>translate</code> имеет вид (x, 0). Поскольку <code>translate</code> является строкой в методе <code>attr()</code> выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем <code>yAxis</code> используя метод <code>axisLeft()</code> . Затем визуализируйте ось с помощью элемента <code>g</code> . Не забудьте использовать атрибут <code>transform</code> для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте <code>call()</code> ось. </section>
|
||||
<section id='instructions'>
|
||||
График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем <code>yAxis</code> используя метод <code>axisLeft()</code> . Затем визуализируйте ось с помощью элемента <code>g</code> . Не забудьте использовать атрибут <code>transform</code> для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте <code>call()</code> ось.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>axisLeft()</code> с <code>yScale</code> в качестве аргумента.
|
||||
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.");'
|
||||
- text: 'Элемент <code>g</code> оси y должен иметь атрибут <code>transform</code> для перевода оси по (60, 0).'
|
||||
testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).");'
|
||||
- text: Ваш код должен вызывать <code>yAxis</code> .
|
||||
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'
|
||||
- text: Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.
|
||||
testString: assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
- text: The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).
|
||||
testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g));
|
||||
- text: Your code should call the <code>yAxis</code>.
|
||||
testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -104,14 +108,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,29 @@
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301473
|
||||
localeTitle: Добавить классы с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод <code>attr()</code> для добавления любого элемента HTML к элементу, включая имя класса. Метод <code>attr()</code> работает так же, как это делает <code>style()</code> . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: <code>selection.attr("class", "container");</code> </section>
|
||||
<section id='description'>
|
||||
Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод <code>attr()</code> для добавления любого элемента HTML к элементу, включая имя класса. Метод <code>attr()</code> работает так же, как это делает <code>style()</code> . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: <code>selection.attr("class", "container");</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>attr()</code> в код в редакторе и поместите класс <code>bar</code> в элементы <code>div</code> . </section>
|
||||
<section id='instructions'>
|
||||
Добавьте метод <code>attr()</code> в код в редакторе и поместите класс <code>bar</code> в элементы <code>div</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элементы <code>div</code> должны иметь класс <code>bar</code> .
|
||||
testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
|
||||
- text: Ваш код должен использовать метод <code>attr()</code> .
|
||||
testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'
|
||||
- text: Your <code>div</code> elements should have a class of <code>bar</code>.
|
||||
testString: assert($('div').attr('class') == "bar");
|
||||
- text: Your code should use the <code>attr()</code> method.
|
||||
testString: assert(code.match(/\.attr/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -60,14 +64,33 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
.attr("class","bar");
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,33 +2,37 @@
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301474
|
||||
localeTitle: Добавление элементов документа с помощью D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод <code>select()</code> выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: <code>const anchor = d3.select("a");</code> Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном <code>anchor</code> . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: <code>append()</code> и <code>text()</code> . Метод <code>append()</code> принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод <code>text()</code> либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: <blockquote> d3.select ( "UL") <br> .append ( "Ли") <br> .text («Очень важный элемент»); </blockquote> D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке. </section>
|
||||
<section id='description'>
|
||||
D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод <code>select()</code> выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: <code>const anchor = d3.select("a");</code> Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном <code>anchor</code> . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: <code>append()</code> и <code>text()</code> . Метод <code>append()</code> принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод <code>text()</code> либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: <blockquote> d3.select ( "UL") <br> .append ( "Ли") <br> .text («Очень важный элемент»); </blockquote> D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте метод <code>select</code> для выбора тега <code>body</code> в документе. Затем <code>append</code> к нему тег <code>h1</code> и добавьте текст «Learning D3» в элемент <code>h1</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте метод <code>select</code> для выбора тега <code>body</code> в документе. Затем <code>append</code> к нему тег <code>h1</code> и добавьте текст «Learning D3» в элемент <code>h1</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>body</code> должно иметь один элемент <code>h1</code> .
|
||||
testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
|
||||
- text: Элемент <code>h1</code> должен иметь в нем текст «Learning D3».
|
||||
testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
|
||||
- text: Ваш код должен получить доступ к объекту <code>d3</code> .
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: Ваш код должен использовать метод <code>select</code> .
|
||||
testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>append</code> .
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
|
||||
- text: Ваш код должен использовать <code>text</code> метод.
|
||||
testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'
|
||||
- text: The <code>body</code> should have one <code>h1</code> element.
|
||||
testString: assert($('body').children('h1').length == 1);
|
||||
- text: The <code>h1</code> element should have the text "Learning D3" in it.
|
||||
testString: assert($('h1').text() == "Learning D3");
|
||||
- text: Your code should access the <code>d3</code> object.
|
||||
testString: assert(code.match(/d3/g));
|
||||
- text: Your code should use the <code>select</code> method.
|
||||
testString: assert(code.match(/\.select/g));
|
||||
- text: Your code should use the <code>append</code> method.
|
||||
testString: assert(code.match(/\.append/g));
|
||||
- text: Your code should use the <code>text</code> method.
|
||||
testString: assert(code.match(/\.text/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -54,14 +58,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,29 @@
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301475
|
||||
localeTitle: Добавить встроенный стиль в элементы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода <code>style()</code> . Метод <code>style()</code> принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: <code>selection.style("color","blue");</code> </section>
|
||||
<section id='description'>
|
||||
D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода <code>style()</code> . Метод <code>style()</code> принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: <code>selection.style("color","blue");</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>style()</code> в код в редакторе, чтобы весь отображаемый текст имел <code>font-family</code> <code>verdana</code> . </section>
|
||||
<section id='instructions'>
|
||||
Добавьте метод <code>style()</code> в код в редакторе, чтобы весь отображаемый текст имел <code>font-family</code> <code>verdana</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элементы <code>h2</code> должны иметь <code>font-family</code> шрифтов verdana.
|
||||
testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'
|
||||
- text: Your <code>h2</code> elements should have a <code>font-family</code> of verdana.
|
||||
testString: assert($('h2').css('font-family') == 'verdana');
|
||||
- text: Your code should use the <code>style()</code> method.
|
||||
testString: assert(code.match(/\.style/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -53,14 +57,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301476
|
||||
localeTitle: Добавить ярлыки в элементы D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 позволяет вам наметить элемент графа, например панель, используя <code>text</code> элемент SVG. Подобно элементу <code>rect</code> , <code>text</code> элемент должен иметь атрибуты <code>x</code> и <code>y</code> , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары. </section>
|
||||
<section id='description'>
|
||||
D3 позволяет вам наметить элемент графа, например панель, используя <code>text</code> элемент SVG. Подобно элементу <code>rect</code> , <code>text</code> элемент должен иметь атрибуты <code>x</code> и <code>y</code> , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Код в редакторе уже привязывает данные к каждому новому <code>text</code> элементу. Сначала добавьте <code>text</code> узлы в <code>svg</code> . Затем добавьте атрибуты для координат <code>x</code> и <code>y</code> . Они должны быть рассчитаны так же, как и <code>rect</code> , за исключением того, что значение <code>y</code> для <code>text</code> должно помещать ярлык на 3 единицы выше, чем планка. Наконец, используйте метод D3 <code>text()</code> чтобы установить метку равной значению точки данных. <strong>Заметка</strong> <br> Чтобы ярлык находился выше бара, решите, должно ли значение <code>y</code> для <code>text</code> быть на 3 больше или на 3 меньше значения <code>y</code> для панели. </section>
|
||||
<section id='instructions'>
|
||||
Код в редакторе уже привязывает данные к каждому новому <code>text</code> элементу. Сначала добавьте <code>text</code> узлы в <code>svg</code> . Затем добавьте атрибуты для координат <code>x</code> и <code>y</code> . Они должны быть рассчитаны так же, как и <code>rect</code> , за исключением того, что значение <code>y</code> для <code>text</code> должно помещать ярлык на 3 единицы выше, чем планка. Наконец, используйте метод D3 <code>text()</code> чтобы установить метку равной значению точки данных. <strong>Заметка</strong> <br> Чтобы ярлык находился выше бара, решите, должно ли значение <code>y</code> для <code>text</code> быть на 3 больше или на 3 меньше значения <code>y</code> для панели.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>text</code> элемент должен иметь метку 12 и значение <code>y</code> 61.
|
||||
testString: 'assert($("text").eq(0).text() == "12" && $("text").eq(0).attr("y") == "61", "The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.");'
|
||||
- text: Второй <code>text</code> элемент должен иметь метку 31 и значение <code>y</code> 4.
|
||||
testString: 'assert($("text").eq(1).text() == "31" && $("text").eq(1).attr("y") == "4", "The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.");'
|
||||
- text: Третий <code>text</code> элемент должен иметь метку 22 и значение <code>y</code> 31.
|
||||
testString: 'assert($("text").eq(2).text() == "22" && $("text").eq(2).attr("y") == "31", "The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.");'
|
||||
- text: Четвертый <code>text</code> элемент должен иметь метку 17 и значение <code>y</code> 46.
|
||||
testString: 'assert($("text").eq(3).text() == "17" && $("text").eq(3).attr("y") == "46", "The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.");'
|
||||
- text: Пятый <code>text</code> элемент должен иметь метку 25 и значение <code>y</code> 22.
|
||||
testString: 'assert($("text").eq(4).text() == "25" && $("text").eq(4).attr("y") == "22", "The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.");'
|
||||
- text: Шестой <code>text</code> элемент должен иметь метку 18 и значение <code>y</code> 43.
|
||||
testString: 'assert($("text").eq(5).text() == "18" && $("text").eq(5).attr("y") == "43", "The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.");'
|
||||
- text: Седьмой <code>text</code> элемент должен иметь метку 29 и значение <code>y</code> 10.
|
||||
testString: 'assert($("text").eq(6).text() == "29" && $("text").eq(6).attr("y") == "10", "The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.");'
|
||||
- text: Восьмой <code>text</code> элемент должен иметь метку 14 и значение <code>y</code> 55.
|
||||
testString: 'assert($("text").eq(7).text() == "14" && $("text").eq(7).attr("y") == "55", "The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.");'
|
||||
- text: Девятый <code>text</code> элемент должен иметь метку 9 и значение <code>y</code> 70.
|
||||
testString: 'assert($("text").eq(8).text() == "9" && $("text").eq(8).attr("y") == "70", "The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.");'
|
||||
- text: The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.
|
||||
testString: assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
- text: The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.
|
||||
testString: assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
- text: The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.
|
||||
testString: assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
- text: The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.
|
||||
testString: assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
- text: The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.
|
||||
testString: assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
- text: The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.
|
||||
testString: assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
- text: The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.
|
||||
testString: assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
- text: The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.
|
||||
testString: assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
- text: The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.
|
||||
testString: assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
|
||||
```
|
||||
|
||||
@@ -84,14 +88,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,43 +2,49 @@
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301477
|
||||
localeTitle: Добавить ярлыки в круги кругов рассеяния
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
<section id='description'>
|
||||
You can add text to create labels for the points in a scatter plot.
|
||||
The goal is to display the comma-separated values for the first (<code>x</code>) and second (<code>y</code>) fields of each item in <code>dataset</code>.
|
||||
The <code>text</code> nodes need <code>x</code> and <code>y</code> attributes to position it on the SVG canvas. In this challenge, the <code>y</code> value (which determines height) can use the same value that the <code>circle</code> uses for its <code>cy</code> attribute. The <code>x</code> value can be slightly larger than the <code>cx</code> value of the <code>circle</code>, so the label is visible. This will push the label to the right of the plotted point.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обозначьте каждую точку на графике рассеяния, используя <code>text</code> элементы. Текст метки должен быть двумя значениями, разделенными запятой и пробелом. Например, ярлык для первой точки - «34, 78». Установите атрибут <code>x</code> чтобы он был на 5 единиц больше, чем значение, которое вы использовали для атрибута <code>cx</code> на <code>circle</code> . Установите атрибут <code>y</code> же, как это используется для значения <code>cy</code> на <code>circle</code> . </section>
|
||||
<section id='instructions'>
|
||||
Обозначьте каждую точку на графике рассеяния, используя <code>text</code> элементы. Текст метки должен быть двумя значениями, разделенными запятой и пробелом. Например, ярлык для первой точки - «34, 78». Установите атрибут <code>x</code> чтобы он был на 5 единиц больше, чем значение, которое вы использовали для атрибута <code>cx</code> на <code>circle</code> . Установите атрибут <code>y</code> же, как это используется для значения <code>cy</code> на <code>circle</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 <code>text</code> элементов.
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- text: 'Первая метка должна иметь текст «34, 78», значение <code>x</code> 39 и значение <code>y</code> 422.'
|
||||
testString: 'assert($("text").eq(0).text() == "34, 78" && $("text").eq(0).attr("x") == "39" && $("text").eq(0).attr("y") == "422", "The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.");'
|
||||
- text: 'Вторая метка должна иметь текст «109, 280», в <code>x</code> значении 114, и <code>y</code> значения 220.'
|
||||
testString: 'assert($("text").eq(1).text() == "109, 280" && $("text").eq(1).attr("x") == "114" && $("text").eq(1).attr("y") == "220", "The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.");'
|
||||
- text: 'Третья метка должна иметь текст «310, 120», значение <code>x</code> 315 и значение <code>y</code> 380.'
|
||||
testString: 'assert($("text").eq(2).text() == "310, 120" && $("text").eq(2).attr("x") == "315" && $("text").eq(2).attr("y") == "380", "The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.");'
|
||||
- text: 'Четвертая метка должна иметь текст «79, 411», значение <code>x</code> 84 и значение <code>y</code> 89.'
|
||||
testString: 'assert($("text").eq(3).text() == "79, 411" && $("text").eq(3).attr("x") == "84" && $("text").eq(3).attr("y") == "89", "The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.");'
|
||||
- text: 'Пятая метка должна иметь текст «420, 220», значение <code>x</code> 425 и значение <code>y</code> 280.'
|
||||
testString: 'assert($("text").eq(4).text() == "420, 220" && $("text").eq(4).attr("x") == "425" && $("text").eq(4).attr("y") == "280", "The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.");'
|
||||
- text: 'Шестой ярлык должен иметь текст «233, 145», значение <code>x</code> 238 и значение <code>y</code> 355.'
|
||||
testString: 'assert($("text").eq(5).text() == "233, 145" && $("text").eq(5).attr("x") == "238" && $("text").eq(5).attr("y") == "355", "The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.");'
|
||||
- text: 'Седьмая метка должна иметь текст «333, 96», значение <code>x</code> 338 и значение <code>y</code> 404.'
|
||||
testString: 'assert($("text").eq(6).text() == "333, 96" && $("text").eq(6).attr("x") == "338" && $("text").eq(6).attr("y") == "404", "The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.");'
|
||||
- text: 'Восьмая метка должна иметь текст «222, 333», значение <code>x</code> 227 и значение <code>y</code> 167.'
|
||||
testString: 'assert($("text").eq(7).text() == "222, 333" && $("text").eq(7).attr("x") == "227" && $("text").eq(7).attr("y") == "167", "The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.");'
|
||||
- text: 'Девятая метка должна иметь текст «78, 320», значение <code>x</code> 83 и значение <code>y</code> 180.'
|
||||
testString: 'assert($("text").eq(8).text() == "78, 320" && $("text").eq(8).attr("x") == "83" && $("text").eq(8).attr("y") == "180", "The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.");'
|
||||
- text: 'Десятая метка должна иметь текст «21, 123», значение <code>x</code> 26 и значение <code>y</code> 377.'
|
||||
testString: 'assert($("text").eq(9).text() == "21, 123" && $("text").eq(9).attr("x") == "26" && $("text").eq(9).attr("y") == "377", "The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.");'
|
||||
- text: Your code should have 10 <code>text</code> elements.
|
||||
testString: assert($('text').length == 10);
|
||||
- text: The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.
|
||||
testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422');
|
||||
- text: The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.
|
||||
testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220');
|
||||
- text: The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.
|
||||
testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380');
|
||||
- text: The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.
|
||||
testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89');
|
||||
- text: The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.
|
||||
testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280');
|
||||
- text: The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.
|
||||
testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355');
|
||||
- text: The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.
|
||||
testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404');
|
||||
- text: The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.
|
||||
testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167');
|
||||
- text: The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.
|
||||
testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180');
|
||||
- text: The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.
|
||||
testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377');
|
||||
|
||||
```
|
||||
|
||||
@@ -98,14 +104,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,44 @@
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Change Styles Based on Data
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301479
|
||||
localeTitle: Изменение стилей на основе данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе <code>style()</code> для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе <code>style()</code> и включать условную логику. Функция обратного вызова использует параметр <code>d</code> для представления точки данных: <blockquote> selection.style ("color", (d) => { <br> / * Логика, возвращающая цвет, основанный на условии * / <br> }); </blockquote> Метод <code>style()</code> не ограничивается настройкой <code>color</code> - его можно использовать и с другими свойствами CSS. </section>
|
||||
<section id='description'>
|
||||
D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе <code>style()</code> для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе <code>style()</code> и включать условную логику. Функция обратного вызова использует параметр <code>d</code> для представления точки данных: <blockquote> selection.style ("color", (d) => { <br> / * Логика, возвращающая цвет, основанный на условии * / <br> }); </blockquote> Метод <code>style()</code> не ограничивается настройкой <code>color</code> - его можно использовать и с другими свойствами CSS.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h2</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
|
||||
<strong>Note</strong><br>You can use if-else logic, or the ternary operator.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>h2</code> должен иметь <code>color</code> красного цвета.
|
||||
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: Второй <code>h2</code> должен иметь <code>color</code> зеленого цвета.
|
||||
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: Третий <code>h2</code> должен иметь <code>color</code> зеленого цвета.
|
||||
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: Пятые <code>h2</code> должны иметь <code>color</code> зеленого цвета.
|
||||
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: The first <code>h2</code> should have a <code>color</code> of red.
|
||||
testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)");
|
||||
- text: The second <code>h2</code> should have a <code>color</code> of green.
|
||||
testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)");
|
||||
- text: The third <code>h2</code> should have a <code>color</code> of green.
|
||||
testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)");
|
||||
- text: The fourth <code>h2</code> should have a <code>color</code> of red.
|
||||
testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)");
|
||||
- text: The fifth <code>h2</code> should have a <code>color</code> of green.
|
||||
testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)");
|
||||
- text: The sixth <code>h2</code> should have a <code>color</code> of red.
|
||||
testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)");
|
||||
- text: The seventh <code>h2</code> should have a <code>color</code> of green.
|
||||
testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)");
|
||||
- text: The eighth <code>h2</code> should have a <code>color</code> of red.
|
||||
testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)");
|
||||
- text: The ninth <code>h2</code> should have a <code>color</code> of red.
|
||||
testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)");
|
||||
|
||||
```
|
||||
|
||||
@@ -67,14 +72,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,27 @@
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Change the Color of an SVG Element
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301480
|
||||
localeTitle: Изменение цвета элемента SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG <code>rect</code> форма окрашена с атрибутом <code>fill</code> . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность. </section>
|
||||
<section id='description'>
|
||||
Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG <code>rect</code> форма окрашена с атрибутом <code>fill</code> . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>attr()</code> чтобы установить «заливку» всех баров на цвет «флот». </section>
|
||||
<section id='instructions'>
|
||||
Добавьте метод <code>attr()</code> чтобы установить «заливку» всех баров на цвет «флот».
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Все бары должны иметь цвет <code>fill</code> флота.
|
||||
testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a <code>fill</code> color of navy.");'
|
||||
- text: The bars should all have a <code>fill</code> color of navy.
|
||||
testString: assert($('rect').css('fill') == "rgb(0, 0, 128)");
|
||||
|
||||
```
|
||||
|
||||
@@ -62,14 +66,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Change the Presentation of a Bar Chart
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301481
|
||||
localeTitle: Изменение презентации диаграммы
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса <code>bar</code> 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты </section>
|
||||
<section id='description'>
|
||||
Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса <code>bar</code> 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Во- первых, добавьте <code>margin</code> в 2px в <code>bar</code> класса в <code>style</code> тега. Затем измените функцию обратного вызова в методе <code>style()</code> чтобы она вернула значение в 10 раз по сравнению с исходным значением данных (плюс «px»). <strong>Заметка</strong> <br> Умножение каждой точки данных на <em>одну и</em> ту <em>же</em> константу только изменяет масштаб. Это похоже на масштабирование, и оно не меняет значения базовых данных. </section>
|
||||
<section id='instructions'>
|
||||
Во- первых, добавьте <code>margin</code> в 2px в <code>bar</code> класса в <code>style</code> тега. Затем измените функцию обратного вызова в методе <code>style()</code> чтобы она вернула значение в 10 раз по сравнению с исходным значением данных (плюс «px»). <strong>Заметка</strong> <br> Умножение каждой точки данных на <em>одну и</em> ту <em>же</em> константу только изменяет масштаб. Это похоже на масштабирование, и оно не меняет значения базовых данных.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>div</code> должен иметь <code>height</code> 120 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Второй <code>div</code> должен иметь <code>height</code> 310 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Третий <code>div</code> должен иметь <code>height</code> 220 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Четвертый <code>div</code> должен иметь <code>height</code> 170 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Пятый <code>div</code> должен иметь <code>height</code> 250 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Шестой <code>div</code> должен иметь <code>height</code> 180 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Седьмой <code>div</code> должен иметь <code>height</code> 290 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Восьмой <code>div</code> должен иметь <code>height</code> 140 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: Девятый <code>div</code> должен иметь <code>height</code> 90 пикселей и <code>margin</code> в 2 пикселя.
|
||||
testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- text: The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px');
|
||||
- text: The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px');
|
||||
- text: The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px');
|
||||
- text: The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px');
|
||||
- text: The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px');
|
||||
- text: The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px');
|
||||
- text: The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px');
|
||||
- text: The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px');
|
||||
- text: The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.
|
||||
testString: assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px');
|
||||
|
||||
```
|
||||
|
||||
@@ -77,14 +81,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,33 @@
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301482
|
||||
localeTitle: Создайте панель для каждой точки данных в наборе
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача добавила только один прямоугольник в элемент <code>svg</code> для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах <code>data()</code> , <code>enter()</code> и SVG для создания и добавления прямоугольника для каждой точки <code>dataset</code> в <code>dataset</code> . Предыдущий вызов показал формат создания и добавления <code>div</code> для каждого элемента в <code>dataset</code> : <blockquote> d3.select ( "тело"). SelectAll ( "DIV") <br> .data (набор данных) <br> .войти() <br> .append ( "DIV") </blockquote> Есть несколько отличий, которые работают с <code>rect</code> элементами вместо <code>divs</code> . <code>rects</code> должны быть добавлены к элементу <code>svg</code> , а не непосредственно к <code>body</code> . Кроме того, вам нужно указать D3, где разместить каждый <code>rect</code> в области <code>svg</code> . Размещение бар будет рассмотрено в следующей задаче. </section>
|
||||
<section id='description'>
|
||||
Последняя задача добавила только один прямоугольник в элемент <code>svg</code> для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах <code>data()</code> , <code>enter()</code> и SVG для создания и добавления прямоугольника для каждой точки <code>dataset</code> в <code>dataset</code> . Предыдущий вызов показал формат создания и добавления <code>div</code> для каждого элемента в <code>dataset</code> : <blockquote> d3.select ( "тело"). SelectAll ( "DIV") <br> .data (набор данных) <br> .войти() <br> .append ( "DIV") </blockquote> Есть несколько отличий, которые работают с <code>rect</code> элементами вместо <code>divs</code> . <code>rects</code> должны быть добавлены к элементу <code>svg</code> , а не непосредственно к <code>body</code> . Кроме того, вам нужно указать D3, где разместить каждый <code>rect</code> в области <code>svg</code> . Размещение бар будет рассмотрено в следующей задаче.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для создания и добавления <code>rect</code> для каждого элемента в <code>dataset</code> . Бары должны отображать все друг на друга, это будет исправлено в следующей задаче. </section>
|
||||
<section id='instructions'>
|
||||
Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для создания и добавления <code>rect</code> для каждого элемента в <code>dataset</code> . Бары должны отображать все друг на друга, это будет исправлено в следующей задаче.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш документ должен иметь 9 <code>rect</code> элементы.
|
||||
testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
|
||||
- text: Ваш код должен использовать метод <code>data()</code> .
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>enter()</code> .
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>append()</code> .
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'
|
||||
- text: Your document should have 9 <code>rect</code> elements.
|
||||
testString: assert($('rect').length == 9);
|
||||
- text: Your code should use the <code>data()</code> method.
|
||||
testString: assert(code.match(/\.data/g));
|
||||
- text: Your code should use the <code>enter()</code> method.
|
||||
testString: assert(code.match(/\.enter/g));
|
||||
- text: Your code should use the <code>append()</code> method.
|
||||
testString: assert(code.match(/\.append/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +69,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,31 @@
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301483
|
||||
localeTitle: Создайте линейную шкалу с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. <code>Scales</code> - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения <code>x</code> и <code>y</code> соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить. </section>
|
||||
<section id='description'>
|
||||
Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. <code>Scales</code> - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения <code>x</code> и <code>y</code> соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>scale</code> переменную, чтобы создать линейную шкалу. Затем установите <code>output</code> переменную в шкалу с аргументом ввода 50. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>scale</code> переменную, чтобы создать линейную шкалу. Затем установите <code>output</code> переменную в шкалу с аргументом ввода 50.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 50.
|
||||
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
|
||||
- text: Ваш код должен использовать метод <code>scaleLinear()</code> .
|
||||
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
|
||||
- text: <code>output</code> переменная должна вызывать <code>scale</code> с аргументом 50.
|
||||
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'
|
||||
- text: The text in the <code>h2</code> should be 50.
|
||||
testString: assert($('h2').text() == '50');
|
||||
- text: Your code should use the <code>scaleLinear()</code> method.
|
||||
testString: assert(code.match(/\.scaleLinear/g));
|
||||
- text: The <code>output</code> variable should call <code>scale</code> with an argument of 50.
|
||||
testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -54,14 +58,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,27 @@
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301484
|
||||
localeTitle: Создайте Scatterplot с кругами SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям <code>x</code> и <code>y</code> и используются для позиционирования круга при визуализации. SVG имеет <code>circle</code> тег для создания формы круга. Он очень похож на элементы <code>rect</code> которые вы использовали для гистограммы. </section>
|
||||
<section id='description'>
|
||||
График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям <code>x</code> и <code>y</code> и используются для позиционирования круга при визуализации. SVG имеет <code>circle</code> тег для создания формы круга. Он очень похож на элементы <code>rect</code> которые вы использовали для гистограммы.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для привязки <code>dataset</code> к новым элементам <code>circle</code> , которые добавляются к холсту SVG. <strong>Заметка</strong> <br> Круги не будут видны, потому что мы еще не установили их атрибуты. Мы сделаем это в следующей задаче. </section>
|
||||
<section id='instructions'>
|
||||
Используйте методы <code>data()</code> , <code>enter()</code> и <code>append()</code> для привязки <code>dataset</code> к новым элементам <code>circle</code> , которые добавляются к холсту SVG. <strong>Заметка</strong> <br> Круги не будут видны, потому что мы еще не установили их атрибуты. Мы сделаем это в следующей задаче.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: Your code should have 10 <code>circle</code> elements.
|
||||
testString: assert($('circle').length == 10);
|
||||
|
||||
```
|
||||
|
||||
@@ -68,14 +72,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,31 +2,39 @@
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Display Shapes with SVG
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301485
|
||||
localeTitle: Отображать фигуры с помощью SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
<section id='description'>
|
||||
The last challenge created an <code>svg</code> element with a given width and height, which was visible because it had a <code>background-color</code> applied to it in the <code>style</code> tag. The code made space for the given width and height.
|
||||
The next step is to create a shape to put in the <code>svg</code> area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<code><rect></code>) SVG shape could create a bar in a bar chart.
|
||||
When you place a shape into the <code>svg</code> area, you can specify where it goes with <code>x</code> and <code>y</code> coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for <code>x</code> push the shape to the right, and positive values for <code>y</code> push the shape down from the origin point.
|
||||
To place a shape in the middle of the 500 (width) x 100 (height) <code>svg</code> from last challenge, the <code>x</code> coordinate would be 250 and the <code>y</code> coordinate would be 50.
|
||||
An SVG <code>rect</code> has four attributes. There are the <code>x</code> and <code>y</code> coordinates for where it is placed in the <code>svg</code> area. It also has a <code>height</code> and <code>width</code> to specify the size.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>rect</code> форму в <code>svg</code> используя <code>append()</code> , и присвойте ему атрибут <code>width</code> 25 и атрибут <code>height</code> 100. Также дайте атрибутам <code>rect</code> <code>x</code> и <code>y</code> каждый из которых установлен в 0. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте <code>rect</code> форму в <code>svg</code> используя <code>append()</code> , и присвойте ему атрибут <code>width</code> 25 и атрибут <code>height</code> 100. Также дайте атрибутам <code>rect</code> <code>x</code> и <code>y</code> каждый из которых установлен в 0.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем документе должен быть 1 элемент <code>rect</code> .
|
||||
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>width</code> равный 25.
|
||||
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>height</code> равный 100.
|
||||
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
|
||||
- text: Элемент <code>rect</code> должен иметь атрибут <code>x</code> равный 0.
|
||||
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
|
||||
- text: ''
|
||||
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
|
||||
- text: Your document should have 1 <code>rect</code> element.
|
||||
testString: assert($('rect').length == 1);
|
||||
- text: The <code>rect</code> element should have a <code>width</code> attribute set to 25.
|
||||
testString: assert($('rect').attr('width') == '25');
|
||||
- text: The <code>rect</code> element should have a <code>height</code> attribute set to 100.
|
||||
testString: assert($('rect').attr('height') == '100');
|
||||
- text: The <code>rect</code> element should have an <code>x</code> attribute set to 0.
|
||||
testString: assert($('rect').attr('x') == '0');
|
||||
- text: The <code>rect</code> element should have a <code>y</code> attribute set to 0.
|
||||
testString: assert($('rect').attr('y') == '0');
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +69,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301486
|
||||
localeTitle: Динамическое изменение высоты каждой панели
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Высота каждой панели может быть установлена на значение точки данных в массиве, подобно тому, как значение <code>x</code> было задано динамически. <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote></section>
|
||||
<section id='description'>
|
||||
Высота каждой панели может быть установлена на значение точки данных в массиве, подобно тому, как значение <code>x</code> было задано динамически. <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова для атрибута <code>height</code> чтобы вернуть значение времени данных 3. <strong>Примечание.</strong> <br> Помните, что умножение всех точек данных на одну и ту же константу масштабирует данные (например, масштабирование). Это помогает увидеть различия между значениями бар в этом примере. </section>
|
||||
<section id='instructions'>
|
||||
Измените функцию обратного вызова для атрибута <code>height</code> чтобы вернуть значение времени данных 3. <strong>Примечание.</strong> <br> Помните, что умножение всех точек данных на одну и ту же константу масштабирует данные (например, масштабирование). Это помогает увидеть различия между значениями бар в этом примере.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь <code>height</code> 36.
|
||||
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
|
||||
- text: Второй <code>rect</code> должен иметь <code>height</code> 93.
|
||||
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
|
||||
- text: Третий <code>rect</code> должен иметь <code>height</code> 66.
|
||||
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
|
||||
- text: Четвертый <code>rect</code> должен иметь <code>height</code> 51.
|
||||
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
|
||||
- text: Пятый <code>rect</code> должен иметь <code>height</code> 75.
|
||||
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
|
||||
- text: Шестой <code>rect</code> должен иметь <code>height</code> 54.
|
||||
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
|
||||
- text: Седьмой <code>rect</code> должен иметь <code>height</code> 87.
|
||||
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
|
||||
- text: Восьмой <code>rect</code> должен иметь <code>height</code> 42.
|
||||
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
|
||||
- text: Девятый <code>rect</code> должен иметь <code>height</code> 27.
|
||||
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth <code>rect</code> should have a <code>height</code> of 27.");'
|
||||
- text: The first <code>rect</code> should have a <code>height</code> of 36.
|
||||
testString: assert($('rect').eq(0).attr('height') == '36');
|
||||
- text: The second <code>rect</code> should have a <code>height</code> of 93.
|
||||
testString: assert($('rect').eq(1).attr('height') == '93');
|
||||
- text: The third <code>rect</code> should have a <code>height</code> of 66.
|
||||
testString: assert($('rect').eq(2).attr('height') == '66');
|
||||
- text: The fourth <code>rect</code> should have a <code>height</code> of 51.
|
||||
testString: assert($('rect').eq(3).attr('height') == '51');
|
||||
- text: The fifth <code>rect</code> should have a <code>height</code> of 75.
|
||||
testString: assert($('rect').eq(4).attr('height') == '75');
|
||||
- text: The sixth <code>rect</code> should have a <code>height</code> of 54.
|
||||
testString: assert($('rect').eq(5).attr('height') == '54');
|
||||
- text: The seventh <code>rect</code> should have a <code>height</code> of 87.
|
||||
testString: assert($('rect').eq(6).attr('height') == '87');
|
||||
- text: The eighth <code>rect</code> should have a <code>height</code> of 42.
|
||||
testString: assert($('rect').eq(7).attr('height') == '42');
|
||||
- text: The ninth <code>rect</code> should have a <code>height</code> of 27.
|
||||
testString: assert($('rect').eq(8).attr('height') == '27');
|
||||
|
||||
```
|
||||
|
||||
@@ -79,14 +83,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301487
|
||||
localeTitle: Динамически устанавливать координаты для каждого бара
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача создала и добавила прямоугольник к элементу <code>svg</code> для каждой точки в <code>dataset</code> для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами <code>x</code> и <code>y</code> . Они сообщают D3, где начать рисовать фигуру в области <code>svg</code> . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение <code>y</code> остается неизменным (в 0) для всех баров. Однако значение <code>x</code> должно изменяться при добавлении новых баров. Помните, что большие значения <code>x</code> перемещают элементы дальше вправо. По мере прохождения элементов массива в <code>dataset</code> значение x должно увеличиваться. Метод <code>attr()</code> в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно <code>d</code> ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат: <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote> Важно отметить, что вам не нужно писать цикл <code>for</code> или использовать <code>forEach()</code> для перебора элементов в наборе данных. Напомним, что метод <code>data()</code> анализирует набор данных, и любой метод, который привязан после того, как <code>data()</code> запускается один раз для каждого элемента в наборе данных. </section>
|
||||
<section id='description'>
|
||||
Последняя задача создала и добавила прямоугольник к элементу <code>svg</code> для каждой точки в <code>dataset</code> для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами <code>x</code> и <code>y</code> . Они сообщают D3, где начать рисовать фигуру в области <code>svg</code> . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение <code>y</code> остается неизменным (в 0) для всех баров. Однако значение <code>x</code> должно изменяться при добавлении новых баров. Помните, что большие значения <code>x</code> перемещают элементы дальше вправо. По мере прохождения элементов массива в <code>dataset</code> значение x должно увеличиваться. Метод <code>attr()</code> в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно <code>d</code> ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат: <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote> Важно отметить, что вам не нужно писать цикл <code>for</code> или использовать <code>forEach()</code> для перебора элементов в наборе данных. Напомним, что метод <code>data()</code> анализирует набор данных, и любой метод, который привязан после того, как <code>data()</code> запускается один раз для каждого элемента в наборе данных.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова атрибута <code>x</code> чтобы он возвращал значение индекса 30. <strong>Примечание.</strong> <br> Каждый бар имеет ширину 25, поэтому увеличение каждого значения <code>x</code> на 30 добавляет некоторое пространство между столбцами. Любое значение, большее 25, будет работать в этом примере. </section>
|
||||
<section id='instructions'>
|
||||
Измените функцию обратного вызова атрибута <code>x</code> чтобы он возвращал значение индекса 30. <strong>Примечание.</strong> <br> Каждый бар имеет ширину 25, поэтому увеличение каждого значения <code>x</code> на 30 добавляет некоторое пространство между столбцами. Любое значение, большее 25, будет работать в этом примере.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь значение <code>x</code> 0.
|
||||
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
|
||||
- text: Второй <code>rect</code> должен иметь значение <code>x</code> 30.
|
||||
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
|
||||
- text: Третий <code>rect</code> должен иметь значение <code>x</code> 60.
|
||||
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
|
||||
- text: Четвертый <code>rect</code> должен иметь значение <code>x</code> 90.
|
||||
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
|
||||
- text: Пятый <code>rect</code> должен иметь значение <code>x</code> 120.
|
||||
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
|
||||
- text: Шестой <code>rect</code> должен иметь значение <code>x</code> 150.
|
||||
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
|
||||
- text: Седьмой <code>rect</code> должен иметь значение <code>x</code> 180.
|
||||
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
|
||||
- text: Восьмой <code>rect</code> должен иметь значение <code>x</code> 210.
|
||||
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
|
||||
- text: Девятый <code>rect</code> должен иметь значение <code>x</code> 240.
|
||||
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
|
||||
- text: The first <code>rect</code> should have an <code>x</code> value of 0.
|
||||
testString: assert($('rect').eq(0).attr('x') == '0');
|
||||
- text: The second <code>rect</code> should have an <code>x</code> value of 30.
|
||||
testString: assert($('rect').eq(1).attr('x') == '30');
|
||||
- text: The third <code>rect</code> should have an <code>x</code> value of 60.
|
||||
testString: assert($('rect').eq(2).attr('x') == '60');
|
||||
- text: The fourth <code>rect</code> should have an <code>x</code> value of 90.
|
||||
testString: assert($('rect').eq(3).attr('x') == '90');
|
||||
- text: The fifth <code>rect</code> should have an <code>x</code> value of 120.
|
||||
testString: assert($('rect').eq(4).attr('x') == '120');
|
||||
- text: The sixth <code>rect</code> should have an <code>x</code> value of 150.
|
||||
testString: assert($('rect').eq(5).attr('x') == '150');
|
||||
- text: The seventh <code>rect</code> should have an <code>x</code> value of 180.
|
||||
testString: assert($('rect').eq(6).attr('x') == '180');
|
||||
- text: The eighth <code>rect</code> should have an <code>x</code> value of 210.
|
||||
testString: assert($('rect').eq(7).attr('x') == '210');
|
||||
- text: The ninth <code>rect</code> should have an <code>x</code> value of 240.
|
||||
testString: assert($('rect').eq(8).attr('x') == '240');
|
||||
|
||||
```
|
||||
|
||||
@@ -79,14 +83,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Invert SVG Elements
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301488
|
||||
localeTitle: Инвертировать элементы SVG
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата <code>x</code> из 0 помещает фигуру на левый край области SVG. Координата <code>y</code> из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения <code>x</code> нажимают прямоугольник вправо. Более высокие значения <code>y</code> выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления <code>y</code> координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата <code>y</code> должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты <code>y</code> из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата <code>y</code> будет равна 99. Координата <code>y</code> которая равна <code>y = heightOfSVG - heightOfBar</code> , поместит бары вправо-вверх. </section>
|
||||
<section id='description'>
|
||||
Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата <code>x</code> из 0 помещает фигуру на левый край области SVG. Координата <code>y</code> из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения <code>x</code> нажимают прямоугольник вправо. Более высокие значения <code>y</code> выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления <code>y</code> координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата <code>y</code> должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты <code>y</code> из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата <code>y</code> будет равна 99. Координата <code>y</code> которая равна <code>y = heightOfSVG - heightOfBar</code> , поместит бары вправо-вверх.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените функцию обратного вызова для атрибута <code>y</code> чтобы установить бары вправо-вверх. Помните, что <code>height</code> бара в 3 раза превышает значение <code>d</code> . <strong>Заметка</strong> <br> В общем случае соотношение <code>y = h - m * d</code> , где <code>m</code> - постоянная, которая масштабирует точки данных. </section>
|
||||
<section id='instructions'>
|
||||
Измените функцию обратного вызова для атрибута <code>y</code> чтобы установить бары вправо-вверх. Помните, что <code>height</code> бара в 3 раза превышает значение <code>d</code> . <strong>Заметка</strong> <br> В общем случае соотношение <code>y = h - m * d</code> , где <code>m</code> - постоянная, которая масштабирует точки данных.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>rect</code> должен иметь значение <code>y</code> 64.
|
||||
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first <code>rect</code> should have a <code>y</code> value of 64.");'
|
||||
- text: Второй <code>rect</code> должен иметь значение <code>y</code> 7.
|
||||
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second <code>rect</code> should have a <code>y</code> value of 7.");'
|
||||
- text: Третий <code>rect</code> должен иметь значение <code>y</code> 34.
|
||||
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third <code>rect</code> should have a <code>y</code> value of 34.");'
|
||||
- text: Четвертый <code>rect</code> должен иметь значение <code>y</code> 49.
|
||||
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth <code>rect</code> should have a <code>y</code> value of 49.");'
|
||||
- text: Пятый <code>rect</code> должен иметь значение <code>y</code> 25.
|
||||
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth <code>rect</code> should have a <code>y</code> value of 25.");'
|
||||
- text: Шестой <code>rect</code> должен иметь значение <code>y</code> 46.
|
||||
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth <code>rect</code> should have a <code>y</code> value of 46.");'
|
||||
- text: Седьмой <code>rect</code> должен иметь значение <code>y</code> 13.
|
||||
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh <code>rect</code> should have a <code>y</code> value of 13.");'
|
||||
- text: ''
|
||||
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth <code>rect</code> should have a <code>y</code> value of 58.");'
|
||||
- text: ''
|
||||
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth <code>rect</code> should have a <code>y</code> value of 73.");'
|
||||
- text: The first <code>rect</code> should have a <code>y</code> value of 64.
|
||||
testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3));
|
||||
- text: The second <code>rect</code> should have a <code>y</code> value of 7.
|
||||
testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3));
|
||||
- text: The third <code>rect</code> should have a <code>y</code> value of 34.
|
||||
testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3));
|
||||
- text: The fourth <code>rect</code> should have a <code>y</code> value of 49.
|
||||
testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3));
|
||||
- text: The fifth <code>rect</code> should have a <code>y</code> value of 25.
|
||||
testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3));
|
||||
- text: The sixth <code>rect</code> should have a <code>y</code> value of 46.
|
||||
testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3));
|
||||
- text: The seventh <code>rect</code> should have a <code>y</code> value of 13.
|
||||
testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3));
|
||||
- text: The eighth <code>rect</code> should have a <code>y</code> value of 58.
|
||||
testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3));
|
||||
- text: The ninth <code>rect</code> should have a <code>y</code> value of 73.
|
||||
testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3));
|
||||
|
||||
```
|
||||
|
||||
@@ -79,14 +83,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,31 @@
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Learn About SVG in D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301489
|
||||
localeTitle: Узнайте о SVG в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> SVG означает <code>Scalable Vector Graphics</code> . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны <code>svg</code> теге HTML <code>svg</code> . CSS может быть масштабируемым, когда стили используют относительные единицы (например, <code>vh</code> , <code>vw</code> или проценты), но использование SVG более гибко для создания визуализации данных. </section>
|
||||
<section id='description'>
|
||||
SVG означает <code>Scalable Vector Graphics</code> . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны <code>svg</code> теге HTML <code>svg</code> . CSS может быть масштабируемым, когда стили используют относительные единицы (например, <code>vh</code> , <code>vw</code> или проценты), но использование SVG более гибко для создания визуализации данных.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте узел <code>svg</code> в <code>body</code> используя <code>append()</code> . Дайте ему атрибут <code>width</code> установленный для предоставленного <code>w</code> константы, и атрибут <code>height</code> установленный для предоставленной постоянной <code>h</code> используя метод <code>attr()</code> для каждого. Вы увидите его на выходе, потому что в теге <code>style</code> используется <code>background-color</code> розового <code>background-color</code> . <strong>Заметка</strong> <br> Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте узел <code>svg</code> в <code>body</code> используя <code>append()</code> . Дайте ему атрибут <code>width</code> установленный для предоставленного <code>w</code> константы, и атрибут <code>height</code> установленный для предоставленной постоянной <code>h</code> используя метод <code>attr()</code> для каждого. Вы увидите его на выходе, потому что в теге <code>style</code> используется <code>background-color</code> розового <code>background-color</code> . <strong>Заметка</strong> <br> Атрибуты ширины и высоты не имеют единиц. Это строительный блок масштабирования - элемент всегда будет иметь соотношение ширины и высоты 5: 1, независимо от уровня масштабирования.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
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.");'
|
||||
- text: Your document should have 1 <code>svg</code> element.
|
||||
testString: assert($('svg').length == 1);
|
||||
- text: The <code>svg</code> element should have a <code>width</code> attribute set to 500 or styled to have a width of 500px.
|
||||
testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px');
|
||||
- text: The <code>svg</code> element should have a <code>height</code> attribute set to 100 or styled to have a height of 100px.
|
||||
testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px');
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +63,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,31 @@
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Select a Group of Elements with D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301490
|
||||
localeTitle: Выберите группу элементов с D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 также имеет метод <code>selectAll()</code> для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: <code>const anchors = d3.selectAll("a");</code> Как и метод <code>select()</code> , <code>selectAll()</code> поддерживает цепочку методов, и вы можете использовать ее другими способами. </section>
|
||||
<section id='description'>
|
||||
D3 также имеет метод <code>selectAll()</code> для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: <code>const anchors = d3.selectAll("a");</code> Как и метод <code>select()</code> , <code>selectAll()</code> поддерживает цепочку методов, и вы можете использовать ее другими способами.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выберите все теги <code>li</code> в документе и измените их текст на «элемент списка», связав метод <code>.text()</code> . </section>
|
||||
<section id='instructions'>
|
||||
Выберите все теги <code>li</code> в документе и измените их текст на «элемент списка», связав метод <code>.text()</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'На странице должно быть 3 элемента <code>li</code> , а текст в каждом должен содержать «элемент списка». Капитализация и интервал должны соответствовать точно.'
|
||||
testString: 'assert($("li").text().match(/list item/g).length == 3, "There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.");'
|
||||
- text: Ваш код должен получить доступ к объекту <code>d3</code> .
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: Ваш код должен использовать метод <code>selectAll</code> .
|
||||
testString: 'assert(code.match(/\.selectAll/g), "Your code should use the <code>selectAll</code> method.");'
|
||||
- text: There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
|
||||
testString: assert($('li').text().match(/list item/g).length == 3);
|
||||
- text: Your code should access the <code>d3</code> object.
|
||||
testString: assert(code.match(/d3/g));
|
||||
- text: Your code should use the <code>selectAll</code> method.
|
||||
testString: assert(code.match(/\.selectAll/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -53,14 +57,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,31 +2,35 @@
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Set a Domain and a Range on a Scale
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301491
|
||||
localeTitle: Установка домена и диапазона по шкале
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси <code>x</code> на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы <code>domain()</code> и <code>range()</code> задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример: <blockquote> // Установить домен <br> // Область охватывает набор входных значений <br> scale.domain ([50, 480]); <br> // Установить диапазон <br> // Диапазон охватывает набор выходных значений <br> scale.range ([10, 500]); <br> масштаб (50) // Возвращает 10 <br> масштаб (480) // Возвращает 500 <br> масштаб (325) // Возвращает 323.37 <br> масштаб (750) // Возвращает 807.67 <br> d3.scaleLinear () </blockquote> Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне. </section>
|
||||
<section id='description'>
|
||||
По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси <code>x</code> на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы <code>domain()</code> и <code>range()</code> задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример: <blockquote> // Установить домен <br> // Область охватывает набор входных значений <br> scale.domain ([50, 480]); <br> // Установить диапазон <br> // Диапазон охватывает набор выходных значений <br> scale.range ([10, 500]); <br> масштаб (50) // Возвращает 10 <br> масштаб (480) // Возвращает 500 <br> масштаб (325) // Возвращает 323.37 <br> масштаб (750) // Возвращает 807.67 <br> d3.scaleLinear () </blockquote> Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте масштаб и установите его домен в <code>[250, 500]</code> и диапазон до <code>[10, 150]</code> . <strong>Заметка</strong> <br> Вы можете связать методы <code>domain()</code> и <code>range()</code> с переменной <code>scale</code> . </section>
|
||||
<section id='instructions'>
|
||||
Создайте масштаб и установите его домен в <code>[250, 500]</code> и диапазон до <code>[10, 150]</code> . <strong>Заметка</strong> <br> Вы можете связать методы <code>domain()</code> и <code>range()</code> с переменной <code>scale</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать метод <code>domain()</code> .
|
||||
testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
|
||||
- text: '<code>domain()</code> шкалы должен быть установлен в <code>[250, 500]</code> .'
|
||||
testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.");'
|
||||
- text: Ваш код должен использовать метод <code>range()</code> .
|
||||
testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
|
||||
- text: '<code>range()</code> шкалы должен быть установлен на <code>[10, 150]</code> .'
|
||||
testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.");'
|
||||
- text: Текст в <code>h2</code> должен быть -102.
|
||||
testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'
|
||||
- text: Your code should use the <code>domain()</code> method.
|
||||
testString: assert(code.match(/\.domain/g));
|
||||
- text: The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.
|
||||
testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
||||
- text: Your code should use the <code>range()</code> method.
|
||||
testString: assert(code.match(/\.range/g));
|
||||
- text: The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.
|
||||
testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
- text: The text in the <code>h2</code> should be -102.
|
||||
testString: assert($('h2').text() == '-102');
|
||||
|
||||
```
|
||||
|
||||
@@ -57,14 +61,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,29 @@
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Style D3 Labels
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301492
|
||||
localeTitle: Стильные этикетки D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Методы D3 могут добавлять стили к ярлыкам бара. Атрибут <code>fill</code> устанавливает цвет текста для <code>text</code> узла. Метод <code>style()</code> устанавливает правила CSS для других стилей, таких как «font-family» или «font-size». </section>
|
||||
<section id='description'>
|
||||
Методы D3 могут добавлять стили к ярлыкам бара. Атрибут <code>fill</code> устанавливает цвет текста для <code>text</code> узла. Метод <code>style()</code> устанавливает правила CSS для других стилей, таких как «font-family» или «font-size».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>font-size</code> для <code>text</code> элементов на 25 пикселей, а цвет текста - красный. </section>
|
||||
<section id='instructions'>
|
||||
Установите <code>font-size</code> для <code>text</code> элементов на 25 пикселей, а цвет текста - красный.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: На этикетках должен быть красный цвет <code>fill</code> .
|
||||
testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a <code>fill</code> color of red.");'
|
||||
- text: Все метки должны иметь <code>font-size</code> 25 пикселей.
|
||||
testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a <code>font-size</code> of 25 pixels.");'
|
||||
- text: The labels should all have a <code>fill</code> color of red.
|
||||
testString: assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
- text: The labels should all have a <code>font-size</code> of 25 pixels.
|
||||
testString: assert($('text').css('font-size') == '25px');
|
||||
|
||||
```
|
||||
|
||||
@@ -73,14 +77,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301493
|
||||
localeTitle: Обновление высоты элемента динамически
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте <code>div</code> для каждой точки данных в массиве. 2) Дайте каждому <code>div</code> динамическую высоту, используя функцию обратного вызова в методе <code>style()</code> которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: <code>selection.style("cssProperty", (d) => d)</code> </section>
|
||||
<section id='description'>
|
||||
Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте <code>div</code> для каждой точки данных в массиве. 2) Дайте каждому <code>div</code> динамическую высоту, используя функцию обратного вызова в методе <code>style()</code> которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: <code>selection.style("cssProperty", (d) => d)</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте метод <code>style()</code> в код в редакторе, чтобы установить свойство <code>height</code> для каждого элемента. Используйте функцию обратного вызова, чтобы вернуть значение точки данных с добавленной к ней строкой «px». </section>
|
||||
<section id='instructions'>
|
||||
Добавьте метод <code>style()</code> в код в редакторе, чтобы установить свойство <code>height</code> для каждого элемента. Используйте функцию обратного вызова, чтобы вернуть значение точки данных с добавленной к ней строкой «px».
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>div</code> должен иметь <code>height</code> 12 пикселей.
|
||||
testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
|
||||
- text: Второй <code>div</code> должен иметь <code>height</code> 31 пиксель.
|
||||
testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
|
||||
- text: Третий <code>div</code> должен иметь <code>height</code> 22 пикселя.
|
||||
testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
|
||||
- text: Четвертый <code>div</code> должен иметь <code>height</code> 17 пикселей.
|
||||
testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
|
||||
- text: Пятый <code>div</code> должен иметь <code>height</code> 25 пикселей.
|
||||
testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
|
||||
- text: Шестой <code>div</code> должен иметь <code>height</code> 18 пикселей.
|
||||
testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
|
||||
- text: Седьмой <code>div</code> должен иметь <code>height</code> 29 пикселей.
|
||||
testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
|
||||
- text: Восьмой <code>div</code> должен иметь <code>height</code> 14 пикселей.
|
||||
testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
|
||||
- text: Девятый <code>div</code> должен иметь <code>height</code> 9 пикселей.
|
||||
testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'
|
||||
- text: The first <code>div</code> should have a <code>height</code> of 12 pixels.
|
||||
testString: assert($('div').eq(0).css('height') == '12px');
|
||||
- text: The second <code>div</code> should have a <code>height</code> of 31 pixels.
|
||||
testString: assert($('div').eq(1).css('height') == '31px');
|
||||
- text: The third <code>div</code> should have a <code>height</code> of 22 pixels.
|
||||
testString: assert($('div').eq(2).css('height') == '22px');
|
||||
- text: The fourth <code>div</code> should have a <code>height</code> of 17 pixels.
|
||||
testString: assert($('div').eq(3).css('height') == '17px');
|
||||
- text: The fifth <code>div</code> should have a <code>height</code> of 25 pixels.
|
||||
testString: assert($('div').eq(4).css('height') == '25px');
|
||||
- text: The sixth <code>div</code> should have a <code>height</code> of 18 pixels.
|
||||
testString: assert($('div').eq(5).css('height') == '18px');
|
||||
- text: The seventh <code>div</code> should have a <code>height</code> of 29 pixels.
|
||||
testString: assert($('div').eq(6).css('height') == '29px');
|
||||
- text: The eighth <code>div</code> should have a <code>height</code> of 14 pixels.
|
||||
testString: assert($('div').eq(7).css('height') == '14px');
|
||||
- text: The ninth <code>div</code> should have a <code>height</code> of 9 pixels.
|
||||
testString: assert($('div').eq(8).css('height') == '9px');
|
||||
|
||||
```
|
||||
|
||||
@@ -75,14 +79,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,65 +2,69 @@
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301494
|
||||
localeTitle: Используйте предварительно заданную шкалу для размещения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты <code>x</code> и <code>y</code> для <code>rect</code> или <code>text</code> элементов, или <code>cx</code> и <code>cy</code> для <code>circles</code> . Вот пример: <blockquote> форма <br> .attr ("x", (d) => xScale (d [0])) </blockquote> Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе <code>text()</code> для всплывающей подсказки или метки. </section>
|
||||
<section id='description'>
|
||||
С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты <code>x</code> и <code>y</code> для <code>rect</code> или <code>text</code> элементов, или <code>cx</code> и <code>cy</code> для <code>circles</code> . Вот пример: <blockquote> форма <br> .attr ("x", (d) => xScale (d [0])) </blockquote> Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе <code>text()</code> для всплывающей подсказки или метки.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>xScale</code> и <code>yScale</code> чтобы <code>yScale</code> <code>circle</code> и <code>text</code> фигуры на холст SVG. Для <code>circles</code> применяйте шкалы для установки атрибутов <code>cx</code> и <code>cy</code> . Дайте им радиус 5 единиц. Для <code>text</code> элементов примените шкалы для установки атрибутов <code>x</code> и <code>y</code> . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в <code>xScale</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте <code>xScale</code> и <code>yScale</code> чтобы <code>yScale</code> <code>circle</code> и <code>text</code> фигуры на холст SVG. Для <code>circles</code> применяйте шкалы для установки атрибутов <code>cx</code> и <code>cy</code> . Дайте им радиус 5 единиц. Для <code>text</code> элементов примените шкалы для установки атрибутов <code>x</code> и <code>y</code> . Этикетки должны быть смещены справа от точек. Для этого добавьте 10 единиц к значению данных x, прежде чем передавать его в <code>xScale</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать 10 элементов <code>circle</code> .
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: Первый элемент <code>circle</code> должен иметь значение <code>cx</code> приблизительно 91 и значение <code>cy</code> приблизительно 368 после применения шкал. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(0).attr("cx")) == "91" && Math.round($("circle").eq(0).attr("cy")) == "368" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Второй элемент <code>circle</code> должен иметь значение <code>cx</code> приблизительно 159 и значение <code>cy</code> приблизительно 181 после применения шкал. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(1).attr("cx")) == "159" && Math.round($("circle").eq(1).attr("cy")) == "181" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент третьего <code>circle</code> должен иметь значение <code>cx</code> приблизительно 340 и значение <code>cy</code> приблизительно 329 после применения весов. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(2).attr("cx")) == "340" && Math.round($("circle").eq(2).attr("cy")) == "329" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент четвертого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 131 и значение <code>cy</code> приблизительно 60 после применения весов. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(3).attr("cx")) == "131" && Math.round($("circle").eq(3).attr("cy")) == "60" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент пятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 440 и значение <code>cy</code> приблизительно 237 после применения весов. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(4).attr("cx")) == "440" && Math.round($("circle").eq(4).attr("cy")) == "237" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент шестого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 271 и значение <code>cy</code> приблизительно 306 после применения шкал. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(5).attr("cx")) == "271" && Math.round($("circle").eq(5).attr("cy")) == "306" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент седьмого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 361 и значение <code>cy</code> приблизительно 351 после применения весов. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(6).attr("cx")) == "361" && Math.round($("circle").eq(6).attr("cy")) == "351" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент восьмого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 261 и значение <code>cy</code> приблизительно 132 после применения шкал. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(7).attr("cx")) == "261" && Math.round($("circle").eq(7).attr("cy")) == "132" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент девятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 131 и значение <code>cy</code> приблизительно 144 после применения шкал. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(8).attr("cx")) == "131" && Math.round($("circle").eq(8).attr("cy")) == "144" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Элемент десятого <code>circle</code> должен иметь значение <code>cx</code> приблизительно 79 и значение <code>cy</code> приблизительно 326 после применения весов. Он также должен иметь значение <code>r</code> 5.
|
||||
testString: 'assert(Math.round($("circle").eq(9).attr("cx")) == "79" && Math.round($("circle").eq(9).attr("cy")) == "326" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: Ваш код должен содержать 10 <code>text</code> элементов.
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- text: Первая метка должна иметь значение <code>x</code> приблизительно 100 и значение <code>y</code> приблизительно 368 после применения весов.
|
||||
testString: 'assert(Math.round($("text").eq(0).attr("x")) == "100" && Math.round($("text").eq(0).attr("y")) == "368", "The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(1).attr("x")) == "168" && Math.round($("text").eq(1).attr("y")) == "181", "The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(2).attr("x")) == "350" && Math.round($("text").eq(2).attr("y")) == "329", "The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(3).attr("x")) == "141" && Math.round($("text").eq(3).attr("y")) == "60", "The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(4).attr("x")) == "449" && Math.round($("text").eq(4).attr("y")) == "237", "The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(5).attr("x")) == "280" && Math.round($("text").eq(5).attr("y")) == "306", "The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(6).attr("x")) == "370" && Math.round($("text").eq(6).attr("y")) == "351", "The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(7).attr("x")) == "270" && Math.round($("text").eq(7).attr("y")) == "132", "The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(8).attr("x")) == "140" && Math.round($("text").eq(8).attr("y")) == "144", "The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.");'
|
||||
- text: ''
|
||||
testString: 'assert(Math.round($("text").eq(9).attr("x")) == "88" && Math.round($("text").eq(9).attr("y")) == "326", "The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.");'
|
||||
- text: Your code should have 10 <code>circle</code> elements.
|
||||
testString: assert($('circle').length == 10);
|
||||
- text: The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5');
|
||||
- text: The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5');
|
||||
- text: The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5');
|
||||
- text: The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5');
|
||||
- text: The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5');
|
||||
- text: The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5');
|
||||
- text: The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5');
|
||||
- text: The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5');
|
||||
- text: The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5');
|
||||
- text: The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.
|
||||
testString: assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5');
|
||||
- text: Your code should have 10 <code>text</code> elements.
|
||||
testString: assert($('text').length == 10);
|
||||
- text: The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368');
|
||||
- text: The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181');
|
||||
- text: The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329');
|
||||
- text: The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60');
|
||||
- text: The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237');
|
||||
- text: The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306');
|
||||
- text: The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351');
|
||||
- text: The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132');
|
||||
- text: The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144');
|
||||
- text: The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.
|
||||
testString: assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326');
|
||||
|
||||
```
|
||||
|
||||
@@ -132,14 +136,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,31 @@
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301495
|
||||
localeTitle: Использование динамических весов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Методы D3 <code>min()</code> и <code>max()</code> полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод <code>domain()</code> передает информацию в шкалу о значениях необработанных данных для графика. Метод <code>range()</code> дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод <code>max()</code> с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( <code>w</code> ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. <blockquote> const dataset = [ <br> [34, 78], <br> [109, 280], <br> [310, 120], <br> [79, 411], <br> [420, 220], <br> [233, 145], <br> [333, 96], <br> [222, 333], <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Заполнение между границей холста SVG и графиком <br> const padding = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (набор данных, (d) => d [0])]) <br> .range ([padding, w - padding]); </blockquote> Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод <code>range()</code> заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500). </section>
|
||||
<section id='description'>
|
||||
Методы D3 <code>min()</code> и <code>max()</code> полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод <code>domain()</code> передает информацию в шкалу о значениях необработанных данных для графика. Метод <code>range()</code> дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод <code>max()</code> с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( <code>w</code> ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. <blockquote> const dataset = [ <br> [34, 78], <br> [109, 280], <br> [310, 120], <br> [79, 411], <br> [420, 220], <br> [233, 145], <br> [333, 96], <br> [222, 333], <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Заполнение между границей холста SVG и графиком <br> const padding = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (набор данных, (d) => d [0])]) <br> .range ([padding, w - padding]); </blockquote> Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод <code>range()</code> заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте переменную <code>yScale</code> для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( <code>h</code> ) и включать прокладку. <strong>Заметка</strong> <br> Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент. </section>
|
||||
<section id='instructions'>
|
||||
Используйте переменную <code>yScale</code> для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( <code>h</code> ) и включать прокладку. <strong>Заметка</strong> <br> Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 30.
|
||||
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
|
||||
- text: '<code>domain()</code> yScale должен быть эквивалентен <code>[0, 411]</code> .'
|
||||
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
|
||||
- text: ''
|
||||
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
|
||||
- text: The text in the <code>h2</code> should be 30.
|
||||
testString: assert(output == 30 && $('h2').text() == '30');
|
||||
- text: The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.
|
||||
testString: assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
- text: The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.
|
||||
testString: assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
|
||||
```
|
||||
|
||||
@@ -79,14 +83,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,29 @@
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301496
|
||||
localeTitle: Используйте функции d3.max и d3.min для поиска минимальных и максимальных значений в наборе данных
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> D3 method <code>domain()</code> и <code>range()</code> устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - <code>min()</code> и <code>max()</code> чтобы вернуть эту информацию. Вот пример: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Возвращает 6 <br> d3.max (exampleData) // Возвращает 234 </blockquote> Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы <code>min()</code> и <code>max()</code> принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова <code>d</code> для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Возвращает наименьшее число из первых элементов <br> const minX = d3.min (locationData, (d) => d [0]); <br> // minX сравнивается с 1, 6 и 8 и устанавливается в 1 </blockquote></section>
|
||||
<section id='description'>
|
||||
D3 method <code>domain()</code> и <code>range()</code> устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - <code>min()</code> и <code>max()</code> чтобы вернуть эту информацию. Вот пример: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Возвращает 6 <br> d3.max (exampleData) // Возвращает 234 </blockquote> Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы <code>min()</code> и <code>max()</code> принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова <code>d</code> для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Возвращает наименьшее число из первых элементов <br> const minX = d3.min (locationData, (d) => d [0]); <br> // minX сравнивается с 1, 6 и 8 и устанавливается в 1 </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Переменная <code>positionData</code> содержит трехмерный (3D) массив. Используйте метод D3, чтобы найти максимальное значение координаты z (третье значение) из массивов и сохранить его в <code>output</code> переменной. <strong>Заметка</strong> <br> Интересный факт - D3 может отображать 3D-массивы. </section>
|
||||
<section id='instructions'>
|
||||
Переменная <code>positionData</code> содержит трехмерный (3D) массив. Используйте метод D3, чтобы найти максимальное значение координаты z (третье значение) из массивов и сохранить его в <code>output</code> переменной. <strong>Заметка</strong> <br> Интересный факт - D3 может отображать 3D-массивы.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст в <code>h2</code> должен быть 8.
|
||||
testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
|
||||
- text: Ваш код должен использовать метод <code>max()</code> .
|
||||
testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'
|
||||
- text: The text in the <code>h2</code> should be 8.
|
||||
testString: assert(output == 8 && $('h2').text() == '8');
|
||||
- text: Your code should use the <code>max()</code> method.
|
||||
testString: assert(code.match(/\.max/g), 'Your code should use the <code>max()</code> method.')
|
||||
|
||||
```
|
||||
|
||||
@@ -34,7 +38,7 @@ tests:
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
// Add your code below this line
|
||||
|
||||
const output = undefined; // Change this line
|
||||
@@ -51,14 +55,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,33 @@
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Work with Data in D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301497
|
||||
localeTitle: Работа с данными в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод <code>data()</code> используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод <code>enter()</code> . Когда метод <code>enter()</code> комбинируется с методом <code>data()</code> , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент <code>ul</code> и создает новый элемент списка в зависимости от количества записей в массиве: <blockquote> <Тело> <br> <UL> </ UL> <br> <Скрипт> <br> const dataset = ["a", "b", "c"]; <br> d3.select ( "UL"). SelectAll ( "Ли") <br> .data (набор данных) <br> .войти() <br> .append ( "Ли") <br> .text («Новый элемент»); <br> </ Скрипт> <br> </ Body> </blockquote> Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать <code>ul</code> на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод <code>data()</code> проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод <code>enter()</code> видит, что на странице нет элементов <code>li</code> , но для этого требуется 3 (по одному для каждой части данных в <code>dataset</code> ). Новые элементы <code>li</code> добавляются в <code>ul</code> и имеют текст «Новый элемент». </section>
|
||||
<section id='description'>
|
||||
Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод <code>data()</code> используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод <code>enter()</code> . Когда метод <code>enter()</code> комбинируется с методом <code>data()</code> , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент <code>ul</code> и создает новый элемент списка в зависимости от количества записей в массиве: <blockquote> <Тело> <br> <UL> </ UL> <br> <Скрипт> <br> const dataset = ["a", "b", "c"]; <br> d3.select ( "UL"). SelectAll ( "Ли") <br> .data (набор данных) <br> .войти() <br> .append ( "Ли") <br> .text («Новый элемент»); <br> </ Скрипт> <br> </ Body> </blockquote> Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать <code>ul</code> на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод <code>data()</code> проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод <code>enter()</code> видит, что на странице нет элементов <code>li</code> , но для этого требуется 3 (по одному для каждой части данных в <code>dataset</code> ). Новые элементы <code>li</code> добавляются в <code>ul</code> и имеют текст «Новый элемент».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выберите узел <code>body</code> , затем выберите все элементы <code>h2</code> . Создайте D3 и добавьте тег <code>h2</code> для каждого элемента массива <code>dataset</code> . Текст в <code>h2</code> должен содержать «Новое название». Ваш код должен использовать методы <code>data()</code> и <code>enter()</code> . </section>
|
||||
<section id='instructions'>
|
||||
Выберите узел <code>body</code> , затем выберите все элементы <code>h2</code> . Создайте D3 и добавьте тег <code>h2</code> для каждого элемента массива <code>dataset</code> . Текст в <code>h2</code> должен содержать «Новое название». Ваш код должен использовать методы <code>data()</code> и <code>enter()</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш документ должен содержать 9 <code>h2</code> элементов.
|
||||
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
|
||||
- text: Текст в элементах <code>h2</code> должен указывать «Новое название». Капитализация и интервал должны соответствовать точно.
|
||||
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
|
||||
- text: Ваш код должен использовать метод <code>data()</code> .
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: Ваш код должен использовать метод <code>enter()</code> .
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
- text: Your document should have 9 <code>h2</code> elements.
|
||||
testString: assert($('h2').length == 9);
|
||||
- text: The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.
|
||||
testString: assert($('h2').text().match(/New Title/g).length == 9);
|
||||
- text: Your code should use the <code>data()</code> method.
|
||||
testString: assert(code.match(/\.data/g));
|
||||
- text: Your code should use the <code>enter()</code> method.
|
||||
testString: assert(code.match(/\.enter/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -52,14 +56,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,39 +2,43 @@
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
forumTopicId: 301498
|
||||
localeTitle: Работа с динамическими данными в D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последние две проблемы охватывают основы динамического отображения данных с помощью D3 с использованием методов <code>data()</code> и <code>enter()</code> . Эти методы берут набор данных и вместе с методом <code>append()</code> создают новый элемент DOM для каждой записи в наборе данных. В предыдущей задаче вы создали новый элемент <code>h2</code> для каждого элемента массива <code>dataset</code> , но все они содержали один и тот же текст «Новое название». Это связано с тем, что вы не использовали данные, привязанные к каждому из элементов <code>h2</code> . Метод D3 <code>text()</code> может принимать строку или функцию обратного вызова в качестве аргумента: <code>selection.text((d) => d)</code> В приведенном выше примере параметр <code>d</code> ссылается на одну запись в наборе данных, которая связана с выбором к. Используя текущий пример как контекст, первый элемент <code>h2</code> привязан к 12, второй элемент <code>h2</code> привязан к 31, третий элемент <code>h2</code> привязан к 22 и так далее. </section>
|
||||
<section id='description'>
|
||||
Последние две проблемы охватывают основы динамического отображения данных с помощью D3 с использованием методов <code>data()</code> и <code>enter()</code> . Эти методы берут набор данных и вместе с методом <code>append()</code> создают новый элемент DOM для каждой записи в наборе данных. В предыдущей задаче вы создали новый элемент <code>h2</code> для каждого элемента массива <code>dataset</code> , но все они содержали один и тот же текст «Новое название». Это связано с тем, что вы не использовали данные, привязанные к каждому из элементов <code>h2</code> . Метод D3 <code>text()</code> может принимать строку или функцию обратного вызова в качестве аргумента: <code>selection.text((d) => d)</code> В приведенном выше примере параметр <code>d</code> ссылается на одну запись в наборе данных, которая связана с выбором к. Используя текущий пример как контекст, первый элемент <code>h2</code> привязан к 12, второй элемент <code>h2</code> привязан к 31, третий элемент <code>h2</code> привязан к 22 и так далее.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените метод <code>text()</code> чтобы каждый элемент <code>h2</code> отображал соответствующее значение из массива <code>dataset</code> с одним пробелом и «USD». Например, первый заголовок должен быть «12 долларов США». </section>
|
||||
<section id='instructions'>
|
||||
Измените метод <code>text()</code> чтобы каждый элемент <code>h2</code> отображал соответствующее значение из массива <code>dataset</code> с одним пробелом и «USD». Например, первый заголовок должен быть «12 долларов США».
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Первый <code>h2</code> должен иметь текст «12 USD».
|
||||
testString: 'assert($("h2").eq(0).text() == "12 USD", "The first <code>h2</code> should have the text "12 USD".");'
|
||||
- text: Второй <code>h2</code> должен иметь текст «31 USD».
|
||||
testString: 'assert($("h2").eq(1).text() == "31 USD", "The second <code>h2</code> should have the text "31 USD".");'
|
||||
- text: Третий <code>h2</code> должен иметь текст «22 USD».
|
||||
testString: 'assert($("h2").eq(2).text() == "22 USD", "The third <code>h2</code> should have the text "22 USD".");'
|
||||
- text: Четвертый <code>h2</code> должен иметь текст «17 USD».
|
||||
testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth <code>h2</code> should have the text "17 USD".");'
|
||||
- text: Пятый <code>h2</code> должен иметь текст «25 USD».
|
||||
testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth <code>h2</code> should have the text "25 USD".");'
|
||||
- text: Шестой <code>h2</code> должен иметь текст «18 USD».
|
||||
testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth <code>h2</code> should have the text "18 USD".");'
|
||||
- text: Седьмой <code>h2</code> должен иметь текст «29 USD».
|
||||
testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh <code>h2</code> should have the text "29 USD".");'
|
||||
- text: Восьмой <code>h2</code> должен иметь текст «14 USD».
|
||||
testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth <code>h2</code> should have the text "14 USD".");'
|
||||
- text: Девятый <code>h2</code> должен иметь текст «9 USD».
|
||||
testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth <code>h2</code> should have the text "9 USD".");'
|
||||
- text: The first <code>h2</code> should have the text "12 USD".
|
||||
testString: assert($('h2').eq(0).text() == "12 USD");
|
||||
- text: The second <code>h2</code> should have the text "31 USD".
|
||||
testString: assert($('h2').eq(1).text() == "31 USD");
|
||||
- text: The third <code>h2</code> should have the text "22 USD".
|
||||
testString: assert($('h2').eq(2).text() == "22 USD");
|
||||
- text: The fourth <code>h2</code> should have the text "17 USD".
|
||||
testString: assert($('h2').eq(3).text() == "17 USD");
|
||||
- text: The fifth <code>h2</code> should have the text "25 USD".
|
||||
testString: assert($('h2').eq(4).text() == "25 USD");
|
||||
- text: The sixth <code>h2</code> should have the text "18 USD".
|
||||
testString: assert($('h2').eq(5).text() == "18 USD");
|
||||
- text: The seventh <code>h2</code> should have the text "29 USD".
|
||||
testString: assert($('h2').eq(6).text() == "29 USD");
|
||||
- text: The eighth <code>h2</code> should have the text "14 USD".
|
||||
testString: assert($('h2').eq(7).text() == "14 USD");
|
||||
- text: The ninth <code>h2</code> should have the text "9 USD".
|
||||
testString: assert($('h2').eq(8).text() == "9 USD");
|
||||
|
||||
```
|
||||
|
||||
@@ -66,14 +70,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user