67 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			67 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| ---
 | ||
| id: 587d7fa7367417b2b2512bc6
 | ||
| title: Add Inline Styling to Elements
 | ||
| challengeType: 6
 | ||
| videoUrl: ''
 | ||
| localeTitle: Добавить встроенный стиль в элементы
 | ||
| ---
 | ||
| 
 | ||
| ## Description
 | ||
| <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>
 | ||
| 
 | ||
| ## 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.");'
 | ||
| 
 | ||
| ```
 | ||
| 
 | ||
| </section>
 | ||
| 
 | ||
| ## Challenge Seed
 | ||
| <section id='challengeSeed'>
 | ||
| 
 | ||
| <div id='html-seed'>
 | ||
| 
 | ||
| ```html
 | ||
| <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>
 | ||
| 
 | ||
| ```
 | ||
| 
 | ||
| </div>
 | ||
| 
 | ||
| 
 | ||
| 
 | ||
| </section>
 | ||
| 
 | ||
| ## Solution
 | ||
| <section id='solution'>
 | ||
| 
 | ||
| ```js
 | ||
| // solution required
 | ||
| ```
 | ||
| </section>
 |