3.6 KiB
3.6 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc5 | Work with Dynamic Data in D3 |
|
6 |
Description
data()
and enter()
methods. These methods take a data set and, together with the append()
method, create a new DOM element for each entry in the data set.
In the previous challenge, you created a new h2
element for each item in the dataset
array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the h2
elements.
The D3 text()
method can take a string or a callback function as an argument:
selection.text((d) => d)
In the example above, the parameter d
refers to a single entry in the dataset that a selection is bound to.
Using the current example as context, the first h2
element is bound to 12, the second h2
element is bound to 31, the third h2
element is bound to 22, and so on.
Instructions
text()
method so that each h2
element displays the corresponding value from the dataset
array with a single space and "USD". For example, the first heading should be "12 USD".
Tests
tests:
- text: The first <code>h2</code> should have the text "12 USD".
testString: assert($('h2').eq(0).text() == "12 USD", 'The first <code>h2</code> should have the text "12 USD".');
- text: The second <code>h2</code> should have the text "31 USD".
testString: assert($('h2').eq(1).text() == "31 USD", 'The second <code>h2</code> should have the text "31 USD".');
- text: The third <code>h2</code> should have the text "22 USD".
testString: assert($('h2').eq(2).text() == "22 USD", 'The third <code>h2</code> should have the text "22 USD".');
- text: The fourth <code>h2</code> should have the text "17 USD".
testString: assert($('h2').eq(3).text() == "17 USD", 'The fourth <code>h2</code> should have the text "17 USD".');
- text: The fifth <code>h2</code> should have the text "25 USD".
testString: assert($('h2').eq(4).text() == "25 USD", 'The fifth <code>h2</code> should have the text "25 USD".');
- text: The sixth <code>h2</code> should have the text "18 USD".
testString: assert($('h2').eq(5).text() == "18 USD", 'The sixth <code>h2</code> should have the text "18 USD".');
- text: The seventh <code>h2</code> should have the text "29 USD".
testString: assert($('h2').eq(6).text() == "29 USD", 'The seventh <code>h2</code> should have the text "29 USD".');
- text: The eighth <code>h2</code> should have the text "14 USD".
testString: assert($('h2').eq(7).text() == "14 USD", 'The eighth <code>h2</code> should have the text "14 USD".');
- text: The ninth <code>h2</code> should have the text "9 USD".
testString: assert($('h2').eq(8).text() == "9 USD", 'The ninth <code>h2</code> should have the text "9 USD".');
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")
// Add your code below this line
.text("New Title");
// Add your code above this line
</script>
</body>
Solution
// solution required