freeCodeCamp/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-eleme...

1.9 KiB

id title challengeType videoUrl localeTitle
587d7fa7367417b2b2512bc6 Add Inline Styling to Elements 6 إضافة التصميم الداخلي للعناصر

Description

يتيح لك D3 إضافة أنماط CSS المضمنة على العناصر الديناميكية باستخدام طريقة style() . تأخذ طريقة style() زوجًا ذا قيمة - مفصولة بفواصل كوسيطة. في ما يلي مثال لتعيين لون نص التحديد إلى اللون الأزرق: selection.style("color","blue");

Instructions

أضف style() إلى الشفرة في المحرر لجعل كل النص المعروض يحتوي على font-family من verdana .

Tests

tests:
  - text: يجب أن تحتوي عناصر <code>h2</code> على <code>font-family</code> of verdana.
    testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
  - text: يجب أن تستخدم التعليمات البرمجية الخاصة بك <code>style()</code> .
    testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'

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