3.8 KiB
3.8 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa9367417b2b2512bcf | Dynamically Change the Height of Each Bar |
|
6 | Cambiar dinámicamente la altura de cada barra |
Description
x
. selection.attr ("propiedad", (d, i) => {
/ *
* d es el valor del punto de datos
* i es el índice del punto de datos en la matriz
* /
})
Instructions
height
devuelva el valor de los datos por 3. Nota Recuerde que al multiplicar todos los puntos de datos por la misma constante, se escalan los datos (como hacer zoom). Ayuda a ver las diferencias entre los valores de barras en este ejemplo.
Tests
tests:
- text: El primer <code>rect</code> debe tener una <code>height</code> de 36.
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
- text: El segundo <code>rect</code> debe tener una <code>height</code> de 93.
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
- text: El tercer <code>rect</code> debe tener una <code>height</code> de 66.
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
- text: El cuarto <code>rect</code> debe tener una <code>height</code> de 51.
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
- text: El quinto <code>rect</code> debe tener una <code>height</code> de 75.
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
- text: El sexto <code>rect</code> debe tener una <code>height</code> de 54.
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
- text: El séptimo <code>rect</code> debe tener una <code>height</code> de 87.
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
- text: El octavo <code>rect</code> debe tener una <code>height</code> de 42.
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
- text: El noveno <code>rect</code> debe tener una <code>height</code> de 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