freeCodeCamp/change-styles-based-on-data.russian.md at 6db0c1e71b51b8246eec28b5cba5e1a7a766081d

Files

Valeriy S 12f65a6742 fix(curriculum): fix challenges for russian language

2019-09-18 12:05:38 +05:30

3.7 KiB

Raw Blame History

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
587d7fa7367417b2b2512bc7	Change Styles Based on Data	6	301479	Изменение стилей на основе данных

Description

D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе style() для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе style() и включать условную логику. Функция обратного вызова использует параметр d для представления точки данных:

selection.style ("color", (d) => {
/ * Логика, возвращающая цвет, основанный на условии * /
});

Метод style() не ограничивается настройкой color - его можно использовать и с другими свойствами CSS.

Instructions

Add the style() method to the code in the editor to set the color of the h2 elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green". Note
You can use if-else logic, or the ternary operator.

Tests

tests:
  - 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)");

Challenge Seed

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      .text((d) => (d + " USD"))
      // Add your code below this line



      // Add your code above this line
  </script>
</body>

Solution

// solution required

3.7 KiB Raw Blame History Unescape Escape