3.5 KiB
3.5 KiB
id | title | challengeType |
---|---|---|
587d7fa9367417b2b2512bcf | Dynamically Change the Height of Each Bar | 6 |
Description
x
value was set dynamically.
selection.attr("property", (d, i) => {
/*
* d is the data point value
* i is the index of the data point in the array
*/
})
Instructions
height
attribute to return the data value times 3.
NoteRemember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
Tests
tests:
- text: The first <code>rect</code> should have a <code>height</code> of 36.
testString: assert($('rect').eq(0).attr('height') == '36', 'The first <code>rect</code> should have a <code>height</code> of 36.');
- text: The second <code>rect</code> should have a <code>height</code> of 93.
testString: assert($('rect').eq(1).attr('height') == '93', 'The second <code>rect</code> should have a <code>height</code> of 93.');
- text: The third <code>rect</code> should have a <code>height</code> of 66.
testString: assert($('rect').eq(2).attr('height') == '66', 'The third <code>rect</code> should have a <code>height</code> of 66.');
- text: The fourth <code>rect</code> should have a <code>height</code> of 51.
testString: assert($('rect').eq(3).attr('height') == '51', 'The fourth <code>rect</code> should have a <code>height</code> of 51.');
- text: The fifth <code>rect</code> should have a <code>height</code> of 75.
testString: assert($('rect').eq(4).attr('height') == '75', 'The fifth <code>rect</code> should have a <code>height</code> of 75.');
- text: The sixth <code>rect</code> should have a <code>height</code> of 54.
testString: assert($('rect').eq(5).attr('height') == '54', 'The sixth <code>rect</code> should have a <code>height</code> of 54.');
- text: The seventh <code>rect</code> should have a <code>height</code> of 87.
testString: assert($('rect').eq(6).attr('height') == '87', 'The seventh <code>rect</code> should have a <code>height</code> of 87.');
- text: The eighth <code>rect</code> should have a <code>height</code> of 42.
testString: assert($('rect').eq(7).attr('height') == '42', 'The eighth <code>rect</code> should have a <code>height</code> of 42.');
- text: The ninth <code>rect</code> should have a <code>height</code> of 27.
testString: assert($('rect').eq(8).attr('height') == '27', 'The ninth <code>rect</code> should have a <code>height</code> of 27.');
Challenge Seed
<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", 0)
.attr("width", 25)
.attr("height", (d, i) => {
// Add your code below this line
// Add your code above this line
});
</script>
</body>
Solution
// solution required